Vue之transition

Vue的transition实现动画效果

Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡；
在进入/离开的过渡中，会有 6 个 class 切换；
v-enter 、v-enter-active 、v-enter-to 、v-leave 、v-leave-active 、v-leave-to。

image.png

示例：

    <transition name="slide">
        <div class="sider" v-if="visible">
            <p>hello</p>
            <button class="close" @click="visible=false">close</button>
        </div>
    </transition>

    .slide-enter-active, .slide-leave-active {
        transition: all .3s;
    }
    .slide-enter, .slide-leave-to {
        margin-left: -200px;
    }

vue动画transiton的多种用法：

1. transition

  <transition name="fade">
    <p v-if="visible">hello</p>
  </transition>

要先设置好对应的样式属性才能有对应的变化

.fade-enter-active, .fade-leave-active {
  transition: all 3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  width:100px;
}
p{
  border:1px solid red;
  width:300px;
}

2. 还可以配合animation实现动画+@keyframes

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

3. animate.css 库

先引入animate.css库
https://daneden.github.io/animate.css/
可以设置不同动画单词出现不同动画效果

  <transition
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>

4. JavaScript钩子

<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"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

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

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

5. Velocity.js

可以使用Velocity.js 需要先引用哦

  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }

6. 多个元素的过渡

<div id="example-2">
  <transition name="fade" mode="out-in">
    <button v-if="isEditing" key="save"
            @click="isEditing=!isEditing">
      Save
    </button>
    <button v-else key="edit"
             @click="isEditing=!isEditing">
      Edit
    </button>
  </transition>
</div>

.fade-enter-active, .fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

#example-2{
  position: relative;
  padding: 100px;
}
#example-2 button {
  position: absolute;
}

这种思路就可以做出轮播的效果了。
本人就这种思路写了一个轮播组件。
源码和使用文档

7. 多个组件的过渡

<div id="transition-components-demo">
  <button @click='view="v-a"'>a</button>
  <button @click='view="v-b"'>b</button>
  <transition name="component-fade" mode="out-in">
    <component v-bind:is="view"></component>
  </transition>
</div>

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

这样写就可以做tabs了

8. for循环怎么动画 （列表的进入/离开过渡）

  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>

要点： 标签transition-group、设置一个tag标签、紧跟一个for循环
注意，每个 <transition-group>的子节点必须有独立的 key，动画才能正常工作。

--参考来自Vue官方文档：过渡 & 动画