Vue中transition和animation的使用

一：二者的对比

1.动画循环就用animation。在animation中有一个animation-iteration-count属性可以定义循环次数。transition是执行一次以后就不会执行，但是可以通过transitionEnd事件添加循环，与animation相比animation更加简单明了。

2.自动触发用animation。当页面中的动画是自己执行的那么我们考虑用animation，因为transition是需要借助伪类、js、@madia触发的。常见的伪类是：hover ，：focus。 常见的js就比如click事件。@media可以用于页面缩小到1000px你可以展示你需要的动画。

3.复杂的动画用animation。在遇到很复杂的动画那就用animation。因为animation可以定义关键帧。那你就可以控制每一帧的动画效果。简单的动画效果可以用transition，里面有transition-timing-function属性可以展示动画的速度效果。

二.用transition实现Vue动画

1.在目标元素外包裹<transition name="xxx">

<div id="test">
    <button @click="isShow=!isShow">toggle</button>
   <transition name="xxx">
       <p v-show="isShow">hello</p>
   </transition>
</div>

2.定义class样式

指定过渡样式

 /*显示、隐藏时的过渡效果*/
        .xxx-enter-active,.xxx-leave-active{
            transition: opacity 1s;
        }

 

隐藏样式

/*隐藏时的样式*/
        .xxx-enter,.xxx-to{
            opacity: 0;
        }

transition和animation的用法基本相同，但一般在项目中transition用的以较多

.xxx-enter-active{
            animation: bounce-in .5s;
        }
        .xxx-levave-active{
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            10%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }