Vue学习小札——3.0css过渡/动画

<transition name="fade">
       <div v-if="show">hello world</div>
 </transition>
复制代码

当一个元素被transition包裹之后，Vue会自动地分析元素的css样式，然后构建动画的流程。

显示：

在动画即将被执行的瞬间，会往内部的div上自动地增加两个class，分别是 fade-enter 和fade-enter-active。当动画第一帧执行结束之后，transition这个标签，vue知道它是一个动画效果。vue会在动画运行到第二帧的时候，vue会把之前的fade-enter去掉，再增加fade-enter-to。动画继续执行，直到结束的瞬间，vue会把fade-enter-active 和 fade-enter-to这两个class去掉。

隐藏：

vue会自动构建隐藏地动画流程，隐藏的第一个瞬间的时候，vue会自动生成两个类，分别是fade-leave 和 fade-leave-active。第二帧的时候去掉fade-leave ，增加fade-leave-to。最后一帧，去掉fade-leave-active 和 fade-leave-to 。

所有前缀以fade- 开头是因为 name=“fade”，如果没有fade ，默认的开头是“v-”

@keyframes bounce-in {
      0% {
        transfrom: scale(0);
      }
      50% {
        transfrom: scale(1.5);
      }
      100% {
        transfrom: scale(1);
      }
    }
    .fade-enter-active {
      transform-origin: left center;
      animation: bounce-in 1s;   
    }
   
    .fade-leave-active {
       transform-origin: left center;
       animation: bounce-in 1s reverse;
    }
复制代码

在Vue中使用Animate.css库

1.必须使用自定义class形式命名来使用Animate.css

2.class类里面必须包含animated这个具体的类，然后需要根据入场效果和出场效果的不同，将类名写在第二个位置。

<transition 
        name="fade"
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        >
       <div v-if="show">hello world</div>
 </transition>
复制代码

 <transition 
        name="fade"
        appear
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        appear-active-class="animated swing"
        >
       <div v-if="show">hello world</div>
  </transition>
复制代码

使用appear-active-class这样自定义动画的class ，要记得在类名上再写一个appear 属性。上面例子意思是在动画第一次显示是也有 animated swing的效果。

在vue中同时使用过渡和动画

实际上Animate.css提供的动画原理就是 @keyframes 这种css3的动画效果。

过渡

.fade-enter {
       opacity: 0;
    }
    .fade-enter-active {
       transition: opacity 3s;
    }
    .fade-leave-to {
       opacity: 0;
    }
    .fade-leave-active {
       transition: opacity 3s;
    }
复制代码

<transition 
        name="fade"
        appear
        enter-active-class="animated swing fade-enter-active"
        leave-active-class="animated shake fade-leave-active"
        appear-active-class="animated swing"
        >
       <div v-if="show">hello world</div>
    </transition>
复制代码

我们定义的fade-enter-active 和 fade-leave-active 的过渡（transition）时间是3s，但是Animate.css源码里的animated动画（@keyframes）是1s。这时候要设置  type

 <transition 
        name="fade"
        type="transition"
        appear
        enter-active-class="animated swing fade-enter-active"
        leave-active-class="animated shake fade-leave-active"
        appear-active-class="animated swing"
        >
       <div v-if="show">hello world</div>
 </transition>
复制代码

意思是这里既有keyframe的动画又有transition的动画，动画时长以type里设置的动画类型为准。

也可以自定义动画播放时长

:duration="10000"
复制代码

:duration="{enter: 5000,leave:10000}"
复制代码

Vue中的Js动画与Velocity.js的结合

a.动画显示钩子

@before-enter = "handleBeforeEnter"

handleBeforeEnter: function(el) {
        //el :transition 包裹的div标签
        el.style.color = "red";
       },
复制代码

@enter = "handleEnter"

 handleEnter: function(el,done){
        //done回调函数，当动画执行结束之后，记得手动地调用done回调函数
        setTimeout(()=>{
          el.style.color = "green";
        }, 2000);
        setTimeout(()=>{
           done();
        },4000);
       },
复制代码

@after-enter = "handleAfterEnter"

handleAfterEnter: function(el) {
        el.style.color = "black";
       },
     }复制代码

b.动画消失钩子

@before-leave

@leave 

@after-leave

c.Velocity.js

       handleBeforeEnter: function(el) {
        el.style.opacity = 0;
       },
       handleEnter: function(el,done){
        Velocity(el, 
                 {opacity: 1}, 
                 {duration:1000,
                  complete:done});
       },
       handleAfterEnter: function(el) {
         alert("动画结束");
       },
复制代码

Vue中多个元素或组件的过渡

a.多个元素的过渡：

Vue在动画（在两个元素进行切换的时候）会尽量地复用dom，为了消除复用机制，给每个元素不同地的key值。

Vue在transition还提供了mode配置参数，来设置多个元素切换时的效果。

 <transition name="fade" mode="in-out">
      <div v-if="show" key="hello">hello world</div>
      <div v-else key="bye">bye world</div>
 </transition>
复制代码

.fade-enter {
       opacity: 0;
     }
     .fade-enter-active {
       transition: opacity 1s;
     }
     .fade-leave-to {
        opacity: 0;
     }
     .fade-leave-active {
        transition: opacity 1s;
     }
复制代码

b.多个组件的过渡效果：（动态组件）

<body>
  <div id="app">
    <transition name="fade" mode="out-in">
       <component :is="type"></component>
    </transition>
    <button @click="handleClick">切换</button>
  </div>

  <script>
   Vue.component('child',{
      template: '<div>child</div>'
   });
   Vue.component('child-one',{
      template: '<div>child-one</div>'
   });
  
   var vm = new Vue({
     el: "#app", 
     data: {
      type: 'child'
     },
     methods: {
      handleClick: function() {
        this.type = (this.type==='child') ? 'child-one' : 'child';
      }
     }
    
   });
  </script>
</body>
复制代码

Vue中的列表过渡  transition-group

<style type="text/css">
    .v-enter,.v-leave-to {
       opacity: 0;
    }
    .v-enter-active,.v-leave-active {
      transition: opacity 1s;
    }
</style>

  <div id="app">
    <transition-group>
      <div v-for="(item,index) of list" key="item.id">
        {{item.title}}----{{item.id}}
      </div>
    </transition-group>
    <button @click="handleClick">Add</button>
  </div>

  <script>
   var count = 0;
   var vm = new Vue({
     el: "#app", 
     data: {
      list: []
     },
     methods: {
      handleClick: function() {
        this.list.push({
         id: count++ ,
         title: 'hello  wrold'
        });
      }
     } 
   });
  </script>

复制代码

Vue中的动画封装

<body>
  <div id="app">
    <fade :show="show">
      <div>hello world</div>
    </fade>

    <fade :show="show">
      <h1>bye world</h1>
    </fade>
    <button @click="handleClick">切换</button>
  </div>

  <script>
   Vue.component('fade',{
      props:['show'],
      template: `
      <transition 
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter">
        <slot v-if="show"></slot>
      </transition>
      `,
      methods: {
        handleBeforeEnter: function(el) {
        el.style.color = 'red';
      },
      handleEnter: function(el,done) {
        setTimeout(()=>{
          el.style.color = 'blue';
        }, 2000);
        setTimeout(()=>{
          done();
        }, 5000);
      },
      handleAfterEnter: function(el) {
        el.style.color = 'black';
      }
     }
   });
   var vm = new Vue({
     el: "#app", 
     data: {
      show:true
     },
     methods: {
      handleClick: function() {
       this.show = !this.show;
      } 
    }
  });
  </script>
</body>
复制代码