web-dev-qa-db-fra.com

Animez en douceur v-show dans VueJS

J'essayais d'animer deux divs en utilisant la transition dans Vuejs. Vous trouverez ci-dessous le code (jsfiddle) que j'ai utilisé. Mais je ne sais pas pourquoi ça ne marche pas

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
6
Gijo Varghese

Vous devez ajouter une clé dans chaque div. Outre l'ajout de vue 2.x dans le violon, vous devez apporter les modifications suivantes:

Pourquoi de docs

Lorsque vous basculez entre des éléments portant le même nom de balise, vous devez indiquer à Vue qu'il s'agit d'éléments distincts en leur attribuant des attributs de clé uniques. Sinon, le compilateur de Vue ne remplacera que le contenu de l’élément pour plus d’efficacité. Même lorsque cela n’est pas techniquement inutile, il est considéré comme une bonne pratique de toujours inclure plusieurs éléments dans un composant.

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>

Le violon au travail: https://jsfiddle.net/k6grqLh1/21/

Édité

Pour le rendre plus fluide, vous pouvez utiliser Transition-Modes : mode="out-in", qui fera sortir l'élément actuel en premier, puis, une fois terminé, le nouvel élément passera. Voir code ci-dessous:

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

Fiddle: https://jsfiddle.net/k6grqLh1/22/

16
Saurabh

Je recommanderais certainement d'utiliser: https://github.com/asika32764/vue2-animate

Grande bibliothèque avec AnimateCSS porté sur les transitions VueJS. J'utilise cela avec chaque projet et cela fonctionne parfaitement.

Pour l'utiliser avec v-show avec un seul élément:

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

Tout d’abord ... vous importez Vue 1 . Si vous importez Vue 2, cela fonctionne en 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>

Ensuite, vous devriez lire le document docs https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements si vous voulez voir comment les transitions entre les éléments sont gérées

1
purepear