Vue动画

Vue自带的动画效果通过六个类实现：

　　     v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

            v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

            v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

            v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

            v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

            v-leave-to: 2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

其中 v-enter,v-enter-to,v-leave,v-leave-to 是四个时间点，而v-enter-active，v-leave-active是两个时间段，这个时间段里面就可以设置动画的过度时长以及过度效果

 

实现动画的前提：

• 　必须用<transition></transition>标签将元素包裹起来

 

使用第三方的动画库，这里使用 animate.css 这个库，有官网！

　　使用animate.css：

　　step1:引入animate.css

　　step2：transition 标签中加上 enter-active-class，leave-active-class这两个属性，表示离开和进度动画分别应用哪个class！！ enter-active-class="animate.css动画类名"  leave-active-class="class_name"，

　　step3：给要加动画的元素加上  class='animated'.

　　完成这三个步骤就可以套用animate.css中动画样式了！

 

也可以定义javascript钩子

　　在 attribute 中声明 JavaScript 钩子

　　

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

之后在vue实例 methods属性中定义上相应的钩子，这些钩子函数第一个参数都是，绑定动画的那个元素，也就是包裹在transition中那个元素。然后用js动态为这个dom元素添加动画样式就可以实现特定动画，比如半程动画【只定义进入的钩子】【添加购物车这个动画效果就是半程动画】。

 

列表动画

　　一组元素【例如ul里面的li】要实现动画效果，必须用 <transition-group ></transition-group>包裹。

<!-- 如果 想要实现动画效果的元素是通过v-for循环生成的，不能使用<transition>包裹
            而是应该用 <transiton-group> 包裹  也是vue提供
                而且v-for的每一循环项都必须带有 :key 唯一标识符属性 -->

        <!-- <ul> -->
        <!-- 页面刷新此时li会直接显现在页面,在 transition-group 标签加上 appear 属性，可以实现出场效果 -->
        <!-- transition-group 有个很重要属性 tag 可以设置transition-group 最终被渲染为什么类型的元素，默认是span 如果是想ul的话，就可以吧外面的ul标签去掉，加上tag='ul'   -->
        <transition-group appear tag="ul">
            <li v-for="item in list" :key="item.id">
                {{ item.id }} --- {{ item.val }}
            </li>
        </transition-group>
        <!-- </ul> -->

    </div>

    <!-- 添加删除 li动画效果，
                注意：删除li，如果后续还有，li,后面的li会往上顶，默认是是直接往前顶，没有过度。希望看到的效果是慢慢的往前顶，也如排队一样，前面的人走了，后面的人往前补位，也不会瞬移到前面的人位置上去，而是慢慢的，
                删除li时也想实现这种效果，需要用到两个css样式 【固定写法
                 .v-move{
                     transition:xxxx
                 }以及
                 .v-leave-active{ //因为其实点击删除的元素虽然不在了，但是空间位置得到了保留，定义绝对定位就让这个空间位置消失，后面的元素就过度性的顶上来，这样移除的元素和顶上来的元素都同时有动画效果！！！
                     position:absolute
                 }
                】
            -->