vue2 过渡效果总结

最近我整理了一下vue2的一些过渡效果。来总结到这里。
vue 为我们封装了transition 组件 ，可以给任何元素添加enter 和leave
条件渲染 : v-if
条件展示 ：v-show
动态组件
组件根节点

一、单元素过渡

1. 一般需要过渡的元素要放在<transition> <transition>组件中 ，过渡有四个状态
   ①. enter 元素进入时第一帧的状态
   ②. enter-active 元素从进入第一帧后到完成过渡的这一过程的状态
   ③. leave 元素离开时的第一帧状态
   ④. leave-active 元素离开第一帧后到完成过渡的这一过程的状态
   列如：
   2 . css过渡

HTML

<div id="myDiv">  <button @click="show = !show">点击查看变化</button>  <transition name="fade">      //fade 名字是可以更换的    <div v-if="show">        请看我的变化    </div>  </transition></div>

CSS

.fade-enter-active,.fade-leave-active {    transition: all 1s linear;}.fade-enter,.fade-leave-active {   opacity: 0;   transform:translateX(50px);}

javascript

new Vue({    el:"#myDiv",    data:{        show:true    }})

3.我们也可以设置css动画
只需要将上变得css代码改为

 .fade-enter-active{     animation:Ado .5s ease-in; } @keyframes Ado{       0%{transform:scale(0.5,0.5);}       60%{transform:scale(1,1);}       80%{transform:scale(1.5,1.5);}       100%{transform:scale(1,1);} } .fade-leave-active{     animation:Bdo .5s ease-in; } @keyframes Bdo{       0%{transform:scale(1,1);}       60%{transform:scale(1.5,1.5);}       80%{transform:scale(1,1);}       100%{transform:scale(0.5,0.5);} }

4.自定义过渡类
自定义过渡类就不需要 中的name属性了。类名可以是自己随意起，也可引入第三方动画库animate.css, 但是需要在 加入一些添加类名的属性
enter-class=类名
enter-active-class=类名 (常用)
leave-class=类名
leave-active-class=类名 (常用)

在引入第三方动画库 animate.css 时 以上属性要先添加 animated 类， 在添加 动画类名，例如：
enter-class=”animated hinge “

CSS

.achange{   animation:Ado .5s ease-in; } @keyframes Ado{       0%{transform:scale(0.5,0.5);}       60%{transform:scale(1,1);}       80%{transform:scale(1.5,1.5);}       100%{transform:scale(1,1);} }

HTML

<div id="myDiv">   <button @click="show = !show">点击我</button>     <!-- 这里要加上 animated 才会有效果 (第一个是我自己写的类名，不用加，但是引入animate.css 需要在前面加animate) --> <transition    leave-active-class="achange"      enter-active-class="animated hinge"  >     <p v-if="show">看我的变化</p> </transition>      </div>

JavaScript

new Vue({    el:"#myDiv",    data:{        show:true    }})

5.JavaScript 过渡 钩子
① before-enter
② enter
③ after-enter
④ enter-cancelled (在 v-show 中应用)
⑤ before-leave
⑥ leave
⑦ after-leave
⑧ leave-cancelled (在 v-show 中应用)

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。
否则，它们会被同步调用，过渡会立即完成。

例如

 leave: function (el, done) {    // ...    done()  },  afterLeave: function (el) {    // ...  },

二、多元素过渡

1.实现多个元素过渡用
① v-if 和 v-else 或 v-else-if （两个相邻元素要求不一样）

省略了CSS

<!-- 不相同元素之间可以用v-if 和v-else 来进行过渡，而同元素之间不可用 -->  <button @click="show = !show">点击查看变化</button>  <transition name="fade">          <div v-if="show">        请看我的变化div    </div>    <p v-else="fade">我也会变化pppp</p>  </transition></div><script>    new Vue({        el:"#myDivB",        data:{            show:true        }    })</script>

② 利用 属性 key (推荐)

<!-- 相邻元素是不受限制的，可以为一样的元素 -->  <button @click="show = !show">点击查看变化</button>  <transition name="fade">          <div key="show">        {{show? first : last}}    </div>  </transition></div><script>    new Vue({        el:"#myDivB",        data:{            show:true        }    })</script>

③ v-if 和 key属性 混合使用

<div id="myDivC">    <!-- v-if 、v-show 和 key 配合切换更多元素-->      <button @click="showa">点击查看变化</button>      <transition name="fade">              <div v-if="show == 'one'" key="one">            oneoneoneone        </div>        <div v-if="show == 'two'" key="two">           twotwotwotwo        </div>        <div v-if="show == 'three'" key="three">           threethreethree        </div>      </transition></div><script>    new Vue({        el:"#myDivC",        data:{            show:'one'        },        methods:{             showa:function (){                  if(this.show == 'one'){                    return this.show = 'two';                  }else if(this.show == 'two'){                    return this.show = 'three';                  }else{                    return this.show = 'one';                  }             }        }    })</script>

2.过渡模式
在多个元素过渡时，这些元素会同时出发，vue 提供了两个属性，在 中加入 mode 属性，它有两个值

in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

三、多组件过渡

1.多组件过渡，利用 is 属性

CSS

.fade-enter-active,.fade-leave-active { transition: all 1s linear;}.fade-enter,.fade-leave-active {  opacity: 0;  transform:translateX(50px);}

HTML

<div id="myDiv">  <button @click="show">点击查看变化</button>  <transition name="fade" mode = "out-in">            <component :is="view"></component>          <!-- 组件替换用 is属性 -->  </transition></div>

JavaScript

new Vue({    el:"#myDiv",    data:{        view:"a-view",    },    components: {        "a-view":{            template:"<div>我是第一个模板</div>"         },         "b-view":{            template:"<div>我是第二个模板</div>"         }    },    methods:{      show:function(){         this.view = this.view == "a-view"?"b-view":"a-view";       }    }})

四、列表过渡

列表的过渡需要用 v-for 和 <transition-group> </transition-group> 组件
注意：
① 列表 <transition-group> </transition-group> 在页面渲染出来是个 span 标签， 如果你想更改它用 tag 属性。例如 <transition-group tag="div"> </transition-group>渲染出来就是div
② 列表在循环时 要给每一个列表项添加唯一的key 属性值。这样列表才会有过渡效果

直接上代码说明：
CSS
引入animate.css

span{    display:inline-block;    padding:10px;}.position{position: absolute;} //这个是当列表离开是要添加的类，如果不给定位，列表某个元素离开后依然占位，是不会有过渡的。.list-complete-item{transition:all .3s linear;}//给列表的过渡

HTML

<div id="myDiv">  <button @click="add">随机增加数字</button>  <button @click="remvoed">随机删除数字</button>    <button @click="suffle">随机排序</button>  <transition-group tag="div"      name="flip-list"     enter-active-class="animated bounceInUp position"     leave-active-class="animated bounceOutDown position"  >          <span v-for="item in list" :key="item" class="list-complete-item">{{item}}</span>  </transition-group></div>

JavaScript
引入lodash.min.js 实现随机排序

new Vue({el:"#myDiv",    data:{ //这里写代码片        list:[1,2,3,4,5],        addNumber:5    },    methods:{        randomIndex:function(){ //随机插入的位置            return Math.floor(Math.random()*this.list.length);        },        add:function(){            this.list.splice(this.randomIndex(),0,++this.addNumber)        },        remvoed:function(){                  this.list.splice(this.randomIndex(),1);        },              suffle:function(){                  this.list = _.shuffle(this.list)        }    }})

五、其他过渡

1. 初始渲染的过渡
   在过渡模板<transition> 中加入apper ,页面会在加载时渲染并进行过渡
   apper 和进入 离开过渡一样
   ①自定义类名：
   apper-class
   apper-active-class
   ② 自定义js钩子
   v-on:before-appear
   v-on:appear
   v-on:after-appear