Vue封装的过度与动画

• 作用：在插入，更新或移除DOM元素时，在适合的时候给元素添加样式类名
• 写法

（1）准备好样式（进入与离开）

1. v-enter: 进入的起点
2. v-enter-active: 进入过程
3. v-enter-to: 进入的终点
   ============================
4. v-leave: 离开的起点
5. v-leave-active：离开的过程
6. v-leave-to: 离开的终点
   （2）使用包裹要过度的元素，并配置name属性：
   <transition name="rf"><h2></h2><transition/>

Animation.vue文件

<template>
    
        <div class="df">
            <transition name="hello" appear>
                <h2>你好</h2>
            </transition>
        </div>

</template>

<script>
export default {
    name:'Animation',    
}
</script>

<style>
    .df h2{
        width: 100px;
        background:pink;
        transition: 1.6s linear;
    }

    .hello-enter{
        transform: translateX(100%);
    }
    .hello-enter-to{
        transform: translateX(0); 
    }
</style>