Vue中CSS动画原理

Vue 提供了 transition 的封装组件，transition标签意思它包裹的内容里面有一个过渡的动画效果，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

<div id="root">
    <div v-if="show">hello worlddiv>
    <button @click="handleClick">按钮button>
div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

.fade-enter{
    opacity: 0;
}
.fade-enter-active{
    transition: opacity 3s;
}
<div id="root">
    <transition name="fade">
        <div v-if="show">hello worlddiv>
    transition>
    <button @click="handleClick">按钮button>
div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

代码解析：对opacity进行一个transition的监控，如果监控到opacity发生变化，会让opacity在3s内慢慢从0发生到opacity对应的值。动画即将被执行时，vue会在dom标签上添加2个class为fade-enter，fade-enter-active，动画运行时fade-enter就会被移除，css效果opacity: 0就会变成opacity: 1实现了显示效果，直到动画执行完fade-enter-active才会被移除，

.fade-leave-to{
    opacity: 0;
}
.fade-leave-active{
    transition: opacity 3s;
}
<div id="root">
    <transition name="fade">
        <div v-if="show">hello worlddiv>
    transition>
    <button @click="handleClick">按钮button>
div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

代码解析：对opacity进行一个transition的监控，如果监控到opacity发生变化，会让opacity在3s内慢慢从0发生到opacity对应的值。从显示状态变成隐藏状态，则css效果opacity: 1就会变成opacity: 0实现了隐藏效果，所以需要给它添加一个fade-leave-to的样式。