Vue中CSS动画原理、js动画以及多个动画transition

CSS动画

Vue transition动画效果对于transition包裹的内容有效
如果需要使得某个DOM元素有动画效果，可以将该元素用transition包裹起来，然后对于写CSS样式如 enter、leave-to、enter-active、leave-active。
transition name=“命名xx”
那么style CSS对应为 .xx-enter即前缀为xx，如果transition没有name属性，那么就是默认的前缀v-

//Vue使用animate.css库
<style>
 @keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
    transform: scale(1.5)
    }
     100% {
    transform: scale(1)
    }
}
.enter {
    opacity: 0s
}
</style>
<body>
    <div>
        <transition>
            <div v-show="show"></div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
</body>

使用CSSanimation库，在样式class一定要先写animated
在这里插入图片描述
在animated后需要加上你需要看到的动画效果的样式名字，可以去animation官网去找

JS动画

在transition表签上绑定事件，enter、beforeEnter、leave、afterLeave都是事件钩子，详情可参考Vue.js的官方文档。
enter/leave钩子函数有两个参数function(el, done)其中el是动画作用元素，done是回调函数表示动画结束时，一定要调用的。

<transition name="fade" @beforeEnter="handleBeforEnter"
            @enter="handleEnter"
>
    <div v-show="show">hello</div>
</transition>
<button @click="handleClick"></button>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            show: true
        },
        methods: {
            handleClick: function() {
                this.show = !this.show
            },
            handleBeforeEnter: function(el) {
                el.style.color = 'red'; //el表示transition包裹的标签元素
            },//transition的钩子函数
            handleEnter: function(el,done) {
                setTimeout(() => {
                    el.style.color = 'blue';
                    done()   //done()表示动画结束
                },2000)
            }
        }
    })
</script>

利用velocity.js代替CSS3的animation做动画效果。
------动画效果Velocity不仅包含了$.animate()的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG动画和滚动动画等特色功能。
-------它比$.animate()更快更流畅，性能甚至高于CSS3 animation，是jQuery和CSS3 transition的最佳组合
-------它支持所有现代浏览器，最低可兼容到IE8和Android 2.3
使用方法----在jQuery中使用时写法如下：

$("#test").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 300
});

没有jQuery时的写法：

var oDom=document.getElementById('#root');
Velocity(oDom,{
    opacity: 1
})

参考; https://www.cnblogs.com/shitaotao/p/7624636.html

多个元素/组件的过渡动画

前述是针对单个元素的过渡动画。现在多个元素的动画，需要给每个元素/组件添加key属性已做区别。

    <div id="root">
    <!--in-out或者out-in-->
        <transition mode="in-out">
         <!--显示其一-->
            <div v-if="show" key="hello">hello</div>
            <div v-else="!show" key="bye">bye</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
<script>
    var vm = new Vue({
        el: 'root',
        data: {
            show: true
        },
        methods: {
            handleClick: function() {
                this.show = !this.show;
            }
        }
    })
</script>

列表过渡效果
< transition-group>为一个真实的DOM元素渲染，默认是span，但是可以通过tag属性声明为哪个元素进行渲染，tag=“ul” 即为ul渲染效果.
注意，每个 < transition-group> 的子节点必须有独立的 key ，动画才能正常工作
在这里插入图片描述