Vue.js之css实现过度动画-js教程-PHP中文网

Vue.js之css实现过度动画

php中世界最好的语言

发布： 2018-03-13 14:24:07

原创

1580 人浏览过

这次给大家带来Vue.js之css实现过度动画，Vue.js的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-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 &#39;./components/a.vue&#39;
  import comB from &#39;./components/b.vue&#39;
  export default {    components: {comA, comB},
    data () {      return {        componentView: &#39;com-a&#39;
      }
    },    methods: {
      onToggle () {        if (this.componentView === &#39;com-a&#39;) {          this.componentView = &#39;com-b&#39;
        } else {          this.componentView = &#39;com-a&#39;
        }
      }
    }
  }</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>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！