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