Vue.js の CSS で過剰なアニメーションが実装される

今回はVue.jsのCSSオーバーアニメーションについてお届けします。Vue.jsのCSSオーバーアニメーションの注意点は何ですか？実際の事例を見てみましょう。 トランジション

アニメーション

<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>

ダイナミックコンポーネント、モードはデフォルトです

同時に有効になるトランジションの開始と終了は、すべてを満たすことはできませんVue はトランジション モード

in-out を提供します。新しい要素が最初にトランジションし、完了後に現在の要素がアウトにトランジションします。

out-in: 現在の要素が最初に遷移し、完了後に新しい要素が遷移します。
デフォルトはin-outです

mode="out-in"に設定されている場合の上記のアニメーション

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

注: アニメーションを実行したい場合、2つのタグ名が同じである場合、アニメーションは実行されません。 、タグを設定する必要があります 区別するために異なるキーが使用されます

<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>

同じタグ名を持つ 2 つのアニメーションは異なるキーを設定していません

異なるキーが設定されている場合、アニメーションは実行できます

<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 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Vue.js の計算プロパティとデータ監視

Vue.js イベント バインディング - 組み込みイベント バインディング、カスタム イベント バインディング

以上がVue.js の CSS で過剰なアニメーションが実装されるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。