Vue.js之css實作過度動畫

這次帶給大家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中文網其它相關文章！

推薦閱讀：

Vue.js的計算屬性和資料監聽

Vue.js的事件綁定- 內建事件綁定、自訂事件綁定

#

以上是Vue.js之css實作過度動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！