Vue ＜transition＞ 实现可复用过渡案例

 

<!-- Vue <transition> 实现可复用过渡案例-->
<template>
  <div class="page">
    <button @click="isHello = !isHello">click</button>
    <mySpecialTransition>
      <!--
      当有相同标签名的元素切换时，
      需通过key属性设置唯一的值来让Vue区分它们，
      否则Vue为了效率只会替换相同标签内部的内容
      -->
      <p v-if="isHello" key="hello">hello</p>
      <p v-else key="world">world</p>
    </mySpecialTransition>
  </div>
</template>

<script>
  import mySpecialTransition from '@/components/my-special-transition'
  export default {
    name: 'HelloWorld',
    components: {
      mySpecialTransition
    },
    data() {
      return {
        isHello: true,
      }
    },
    computed: {},

    methods: {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">


</style>

<template>
    <div>
      <!--
      js过渡钩子
      before-enter
      enter
      after-enter
      enter-cancelled
      -->
      <transition name="very-special-transition" mode="out-in"
                  :css="false"
                  @before-enter="beforeEnter"
                  @enter="enter"
                  @leave="leave"
      >
        <slot></slot>
      </transition>
    </div>
</template>

<script>
    export default {
        name: "my-special-transition",
        methods: {
          beforeEnter(el){
            el.style.opacity = 0;
            el.style.transform = 'translateX(50px)';
          },
          enter(el, done) {
            Velocity(el, {opacity: 1, translateX: '0px'}, {complete: done})
          },
          leave(el, done) {
            Velocity(el, {opacity: 0, translateX: '50px'}, {complete: done})
          }
        }
    }
</script>

<style scoped>

</style>

// 在main.js中全局引入velocity.min.js
// Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js
/*
* Velocity中文文档
* http://shouce.jb51.net/velocity/index.html
* */
import '@/assets/js/velocity.min.js'