vue过度动画

vue进入/离开 & 列表过渡

单个组件

style控制

template

<button @click="show1 = !show1">{{show1}}</button>
      <transition name="fade">
        <div class="test" v-show="show1">show and fade</div>
      </transition>

script

data: function() {
    return {
      show1: true,
    }
  },

style

.fade-enter{
  opacity: 0
}
.fade-enter-active{
  transition: 1s;
  animation: ani 3s linear;
}
.fade-enter-to{
  opacity: 1;
}
.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  transition: 1s
}
.fade-leave-to{
  opacity: 0
}
@keyframes ani{
  0%{
    transform: rotate(0deg)
  }
  50%{
    transform: rotate(180deg)
  }
  100%{
    transform: rotate(360deg)
  }
}

css中的“fade”只是transition的名字，-enter表示从无到出现的初始状态，-enter-to表示出现的末状态，-enter-active表示变化的状态，transition和animate在此处插入

leave表示消失，以此类推

js - attribute控制

<transition name="fade"
        @enter="enter"
        @before-enter='beforeEnter'
        @after-enter='afterEnter'
        @leave='leave'
        @before-leave='beforeLeave'
        @after-leave='afterLeave'
        :css="false">
        <div class="test" v-show="show1">show and fade</div>
      </transition>

script

//import jquery from 'jquery'

data: function() {
    return {
      show1: true,
    }
  },
  methods: {
    enter: function(el, done) {
      console.log(el)
      jquery(el).animate({
        width: '-=100',
        color: 'green'
      }, {
        duration: 3000,
        done: function() {
          console.log('done')
　　　　　done()
        }
      })
      console.log('enter')
    },
    beforeEnter: function() {
      console.log('beforeEnter')
    },
    afterEnter: function() {
      console.log('afterEnter')
    },
    leave: function(el, done) {
      console.log('leave')
      done()
    },
    beforeLeave: function() {
      console.log('leaveEnter')
    },
    afterLeave: function () {
      console.log('afterLeave')
    }
  }

函数调用顺序：出现：beforeEnter - >  enter -> afterEnter ；消失：beforeLeave->leave->afterLeave

其中enter和leave表示出现或者消失的过程，在此处调用动画的逻辑，

例如此处利用jquery的animate函数，表示出现后宽度减少100 在3000ms内

函数自动提供了el， 和done两个形式参数，el表示dom元素，done表示动画过程已经完成，如果在没有掉用此函数，动画效果将会在瞬间完成。

transition tag提供：css表示是否收css影响

组件群

 tip group
 <button @click="tipsAdd">add</button>
  <button @click="tipsDec">dec</button>
  <button @click="mad">mad</button>
 </div>
   <transition-group name="tip-group" tag="ul">
  <li v-for="item in tips" :key="item">items + {{item}}</li>
 </transition-group>

methods: {
    tipsAdd: function() {
      let len = this.tips.length
      this.tips.splice(Math.random() * len, 0, this.count++)
    },
    tipsDec: function() {
      let len = this.tips.length
      this.tips.splice(Math.random() * len, 1)
    },
    mad: function() {
      this.tips = _.shuffle(this.tips)
    }
  }

.tip-group-enter, .tip-group-leave-to {
  transform: translateX(50px)
}
.tip-group-enter-active, .tip-group-leave-active, .tip-group-move {
  transition: .8s
}

css的规则和上面的完全一样，只不过是将单个组件的影响修改到了内部包含的全部组件，另外还增加了一个  -move的css属性，这个属性表示整个transition的改变所需要的动画，例如打乱这个列表的顺序等等，这个css属性不受transition tag中的：css属性影响。

总而言之最常用的就是这些，数据驱动