Vue过渡&动画

目录

一、单元素/组件的过渡

1、在CSS过渡和动画中自动应用class

2、使用第三方CSS动画库，如Animate.css

3、在过渡钩子函数中使用JavaScript直接操作DOM

二、v-for列表过渡

三、初始渲染的过渡

---

动画能够提高用户体验，帮助用户更好的理解页面中的功能。Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。

一、单元素/组件的过渡

Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。条件渲染（v-if）、条件展示（v-show）、动态组件、组件根节点。

使用<transition></transition>元素，把需要被动画控制的元素包含。

<transition>组件上的duration属性显式地设置过渡持续时间（以毫秒计）。

<transition :duration="1000"></transition>
<transition :duration="{enter:200,leave:600}"></transition>

1、在CSS过渡和动画中自动应用class

在进入/离开的过渡中，会有6个class切换。

v-enter：一个时间点，定义进入过渡的开始状态。

v-enter-active：一个时间段，定义进入过渡生效时的状态，可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：一个时间点，定义进入过渡的结束状态。

v-leave：一个时间点，定义离开过渡的开始状态。

v-leave-active：一个时间段，定义离开过渡生效时的状态，可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：一个时间点，定义离开过渡的结束状态。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的<transition>，则v-是这些类名的默认前缀。如果你使用了<transition name="my">，则v-enter会替换为my-enter。

<style>
  .fade-slide-enter,
  .fade-slide-leave-to{
    opacity:0;
    transform:translateX(100px);
  }
  .fade-slide-enter-active,
  .fade-slide-leave-active{
    transition:all 1s ease;
  }
</style>

<div id="app">
  <button @click="flag=!flag;">toggle</button>
  <transition name="fade-slide">
    <h3 v-show="flag">这是动画</h3>
  </transition>
</div>
<script>
  var vm=new Vue({
    el:'#app',
    data:{
      flag:false
    }
  });
</script>

2、使用第三方CSS动画库，如Animate.css

https://daneden.github.io/animate.css/ 选择类名，观察动画效果

<link rel="stylesheet" href="lib/animate.css">

<div id="app">
  <button @click="flag=!flag;">toggle</button>
  <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
    <h3 v-show="flag">这是动画</h3>
  </transition>
  <!--或将animated写在transition元素内部的元素
  <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
    <h3 class="animated" v-show="flag">这是动画</h3>
  </transition>
  -->
</div>

3、在过渡钩子函数中使用JavaScript直接操作DOM

实现半场动画。

before-enter：过渡进入前的初始状态；

enter：过渡生效时的状态；

after-enter：过渡完成后执行的代码，如恢复到初始状态便于下一次动画。

<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"

  v-bind:css="false"
>
</transition>

methods: {
  // 进入中
  beforeEnter: function (el) {
  },
  enter: function (el, done) {
    done()
  },
  afterEnter: function (el) {
  },
  enterCancelled: function (el) {
  },

  // 离开时
  beforeLeave: function (el) {
  },
  leave: function (el, done) {    
    done()
  },
  afterLeave: function (el) {
  },
  leaveCancelled: function (el) { // 只用于v-show中
  }
}

过渡钩子函数的第一个参数el，表示要执行动画的DOM元素，是原生的JS DOM对象。

el.offsetWidth或el.offsetHeight等写在该函数顶部，不写可能没有动画效果。

这些钩子函数可以结合CSS transitions/animations使用，也可以单独使用。当只用JavaScript过渡的时候，在enter和leave中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成。done是 afterEnter函数的引用。推荐对于仅使用JavaScript过渡的元素添加v-bind:css="false"，Vue会跳过CSS的检测，也可避免过渡过程中CSS的影响。

<div id="app">
  <button @click="flag=!flag">加入购物车</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
    <div id="ball" v-show="flag"></div>
  </transition> 
</div>
<script>
  var vm=new Vue({
    el:'#app',
    data:{
      flag:false
    },
    methods:{
      beforeEnter(el){
        el.style.transform='translate(0,0)';
      },
      enter(el,done){
        el.offsetWidth;
        el.style.transform='translate(150px,450px)';
        el.style.transition="all 1s ease";

        done();
      },
      afterEnter(el){
        // flag从false变为true是前半场动画，从true变为false是后半场动画
        // 使小球隐藏，且跳过后半场动画
        this.flag=!this.flag;
      }
    }
  });
</script>

二、v-for列表过渡

同时渲染整个列表，使用<transition-group>组件。

不同于<transition>，它在渲染页面时会转换为一个真实的元素，默认为<span>，包含着动画元素。可通过tag将其指定为其它元素，如<transition-group tag="ul"></transition-group>。

过渡模式不可用，因为不再切换特有的元素。

内部元素总是需要提供唯一的key属性值。

<style>
  span{
    display:inline-block;
    margin-right:10px;
  }

  .v-enter,.v-leave-to{
    opacity:0;
    transform:translateY(30px);
  }
  .v-enter-active,.v-leave-active{
    transition:all 1s ease;
  }

  .v-move{
    transition:all 1s ease;
  }
  .v-leave-active{
    position:absolute;
  }
</style>

<div id="app">
  <button @click="add">添加</button>
  <button @click="remove">移除</button>
  <transition-group tag="p">
    <span v-for="item in list" :key="item">{{item}}</span>
  </transition-group> 
</div>
<script>
  var vm=new Vue({
    el:'#app',
    data:{
      list:[1,2,3,4,5,6],
      nextNum:7
    },
    methods:{
      randomIndex(){
        return Math.floor(Math.random()*this.list.length);
      },
      add(){
        this.list.splice(this.randomIndex(),0,this.nextNum++);
      },
      remove(i){
        this.list.splice(this.randomIndex(),1);
      }
    }
  });
</script>

<transition-group>组件不仅可以进入和离开动画，还可以改变定位。v-move会在元素的改变定位的过程中应用，需要和.v-leave-active{position:absolute;}配合使用。

内部的实现，Vue使用了一个叫FLIP简单的动画队列，使用transforms将元素从之前的位置平滑过渡新的位置。使用FLIP过渡的元素不能设置为display:inline，作为替代方案，可以设置为display:inline-block或者放置于flex中。

三、初始渲染的过渡

可以通过appear特性设置节点在初始渲染的过渡，用于<transition>和<transition-group>。

<transition appear></transition>

和进入/离开过渡一样，也可以自定义CSS类名，使用第三方CSS动画库。也可以自定义JavaScript钩子。