web-dev-qa-db-ja.com

VueJSでv-showをスムーズにアニメーション化する

Vuejsのトランジションを使用して2つのdivをアニメーション化しようとしていました。以下は、私が使用したコード（jsfiddle）です。しかし、なぜ機能しないのかわからない

https://jsfiddle.net/k6grqLh1/16/

vue

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-show="show">
        <div class="box yellow"></div>
      </div>
     </transition>
     <transition name="fade">
      <div v-show="!show">
        <div class="box blue"></div>
      </div>
      </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

.box {
  width:200px;height:200px;
}
.yellow{
  background-color:yellow;
}
.blue{
  background-color:blue;
}

js

var vm = new Vue({
  el: '#vue-instance',
  data: {
    show: true
  }
});
vuejs2vue-componentvue.js
7
Gijo Varghese

フィドルにvue 2.xを追加する以外に、各divにキーを追加する必要があります。次の変更を行う必要があります。

Whyfrom docs

同じタグ名を持つ要素間を切り替える場合、Vue固有のキー属性を与えることにより、それらが別個の要素であることを伝える必要があります。 。技術的に不要な場合でも、コンポーネント内の複数のアイテムに常にキーを設定することをお勧めします。

[〜＃〜] html [〜＃〜]

<transition name="fade">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
</transition>
<transition name="fade">
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

作業フィドル： https://jsfiddle.net/k6grqLh1/21/

編集済み

よりスムーズにするには、 Transition-Modes ：mode="out-in"は、現在の要素を最初に移行し、完了したら新しい要素を移行します。以下のコードを参照してください。

<transition name="fade" mode="out-in">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

フィドル： https://jsfiddle.net/k6grqLh1/22/

22
Saurabh

私は間違いなく使用することをお勧めします： https://github.com/asika32764/vue2-animate

VueJS移行に移植されたAnimateCSSの優れたライブラリ。私はそれをすべてのプロジェクトで使用していますが、完全に機能します。

単一要素のv-showで使用するには：

<transition name="fade" >
    <p v-if="show">hello</p>
</transition>
4
M U

まず、。Vue 1.をインポートしています。Vue 2をインポートすると、このHTMLは機能します

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-if="show" key="yellow">
        <div class="box yellow"></div>
      </div>
      <div v-if="!show" key="blue">
        <div class="box blue"></div>
      </div>
    </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

次に、ドキュメントを読む必要があります https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements 要素間の遷移の処理方法を確認する場合

1
purepear