Vue过渡与动画

1.css过渡

css中的过渡呈现的是一种过渡过程，简单来说就是一种动画转换过程。

1.1 css过渡的用法

过渡系统是Vue为DOM动画效果提供的一种特性，它能从DOM中插入、移除时触发css过渡和动画；也就是说，在DOM发生变化时，为其添加特定的class类名。

几种过渡元素

将需要过渡效果的元素放在标签中，在style标签中添加.v-xxx

V-enter：定义进入过渡的开始状态，在元素被插入前生效，在元素被插入后的下一帧移除。
v-enter-activate：定义进入过渡生效时的状态，这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数，在元素被插入前生效，在过渡完成后移除。
v-enter-to：定义进入过渡的结束状态，v-enter被移除时生效，在过渡完成时移除。
v-leave：定义离开过渡的开始状态。
v-leave-activate：定义离开过渡生效时的状态。
v-leave-to：定义离开过渡的结束状态。

2.多个元素过渡

过渡模式分为两种：

out-in模式：当前元素先进行过渡，完成后新元素过渡进入

in-out模式：新元素先进行过渡，完成后当前元素过渡离开

<transition name="xxx" mode="out-in"></transition>

3.动画

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue中同时使用过渡和动画</title>
     <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
     <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css">
     <style>
         .fade-enter,
         .fade-leave-to{
             opacity:0;
         }
         .fade-enter-activate,
         .fade-leave-activate{
             transition:opacity 3s;
         }
     </style>
 </head>
 <body>
 <div id="app">
     <transition
             type="transition" name="fade"
             appear
             enter-active-class="animated swing fade-enter-activate"
             leave-active-class="animated shake fade-leave-activate"
             appear-active-class="animated swing">
         <div v-if="show">Hi Shelgi</div>
     </transition>
     <button @click="Click">点点我</button>
 </div>
 
 <script>
     var vm=new Vue({
         el:"#app",
         data: {
             show: true,
         },
         methods:{
             Click:function(){
                 this.show=!this.show
             }
         }
     })
 </script>
 </body>
 </html>

点击就会看到过渡动画

当然可以依赖css动画库，也能依赖js动画库

keyframes：css的动画库
Animate.css：css的动画库
Velocity.js：js的动画库

总结

过渡动画实现的三种方式是：

使用Vue的标签结合css样式完成动画
利用Animate.css结合实现动画
利用Vue中钩子函数实现动画

Vue第六天---Vue过渡与动画

Vue过渡与动画

1.css过渡

1.1 css过渡的用法

2.多个元素过渡

3.动画

总结