Vue.js 过渡动画

动画的阶段
具体请参考文档
https://cn.vuejs.org/v2/guide/transitions.html

1. css实现过度

• transition 动画

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="adc">
        <p v-show="show">I am show</p>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        show: true
      }
    }
  }
</script>

<style>
 .adc-enter-active, .adc-leave-active {
   transition: all 2s ease-out;
 }
  .adc-enter, .adc-leave-to {
    opacity: 0;
  }
</style>

css改变透明度动画

• css-transform动画

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="my-trans">
        <p v-show="show">I am show</p>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        show: true
      }
    }
  }
</script>

<style>
  .my-trans-enter-active, .my-trans-leave-active {
    transition: all .5s ease-out;
  }
  .my-trans-enter {
    transform: translateY(-100px);
    opacity: 0;
  }
  .my-trans-leave-active {
    transform: translateY(100px);
  }
</style>

css-transform动画

• 动态组件

<template>
  <div>
    <button @click="onToggle">Toggle</button>
    <div class="ab">
      <transition name="fade">
        //动态组件
        <div :is="componentView"></div>
      </transition>
    </div>
  </div>
</template>

<script>
  import comA from './components/a.vue'
  import comB from './components/b.vue'
  export default {
    components: {comA, comB},
    data () {
      return {
        componentView: 'com-a'
      }
    },
    methods: {
      onToggle () {
        if (this.componentView === 'com-a') {
          this.componentView = 'com-b'
        } else {
          this.componentView = 'com-a'
        }
      }
    }
  }
</script>

<style>
 .fade-enter-active, .fade-leave-active {
   transition: all 2s ease-out;
 }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>

动态组件,mode为默认
同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
默认情况下是in-out

上述动画,如果设置mode="out-in"

<transition name="fade" mode="out-in">
   <div :is="componentView"></div>
</transition>

实现效果为:

mode="out-in"

注意:如果两个标签名相同,是不会执行动画的,若想执行动画,需要给标签设置不同的key来加以区分

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        <p v-if="show" >i am show</p>
        <p v-else >not in show</p>
      </transition>
    </div>
  </div>
</template>

动画效果为:

两个标签名相同的动画,未设置不同的key

如果设置了不同的key,就可以执行动画了

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        //设置不同的key
        <p v-if="show" key="1">i am show</p>
        <p v-else key="2">not in show</p>
      </transition>
    </div>
  </div>
</template>

两个标签名相同的动画,设置不同的key

2. js实现过渡

具体看官方教程,写的比较详细 JavaScript 钩子
Vue.js中引入jQuery教程:http://www.cnblogs.com/Yann001/p/6850698.html

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
        :css="false"
      >
        <p class="animate-p" v-show="show">i am show</p>
      </transition>
    </div>
  </div>
</template>

<script>
  import comA from './components/a.vue'
  import comB from './components/b.vue'
  export default {
    components: {comA, comB},
    data () {
      return {
        show: true
      }
    },
    methods: {
//      动画执行的起始位置
      beforeEnter: function (el) {
        $(el).css({
          left: '50px',
          opacity: 0
        })
      },
      enter: function (el, done) {
        $(el).animate({
          left: '200px',
          opacity: 1
        }, {
          duration: 1500,
          complete: done
        })
      },
      leave: function (el, done) {
        $(el).animate({
          left: '500px',
          opacity: 0
        }, {
          duration: 1500,
          complete: done
        })
      }
    }
  }
</script>

<style>

.animate-p {
  position: absolute;
  top: 100px;
  left: 0;
}
</style>

当让标签隐藏时,执行的是leave动画;
当让标签显示时,执行的是beforeEnter,enter动画

js过渡动画

• 在学习饿了么外卖app时,发现这样写也可以,
  给要执行动画的标签添加transition

<div v-show="detailShow" class="detail" transition="fade">

在CSS代码中

    .detail
      ......
      &.fade-transition
        opacity: 1
        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0
        background: rgba(7, 17, 27, 0)

这样就可以简单的实现一个背景透明度过度的动画