webentwicklung-frage-antwort-db.com.de

Animieren Sie nahtlos die V-Show in VueJS

Ich habe versucht, zwei Divs mit Übergang in Vuejs zu animieren. Unten ist der Code (jsfiddle), den ich verwendet habe. Aber weiß nicht, warum es nicht funktioniert

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
  }
});
6
Gijo Varghese

Sie müssen den Schlüssel in jedem div hinzufügen, zusätzlich zum Hinzufügen von vue 2.x in der Geige. Sie müssen folgende Änderungen vornehmen:

Warum aus docs

Wenn Sie zwischen Elementen wechseln, die denselben Tagnamen haben, müssen Sie Vue mitteilen, dass es sich um unterschiedliche Elemente handelt, indem Sie ihnen eindeutige Schlüsselattribute zuweisen. Andernfalls ersetzt der Vue-Compiler aus Effizienzgründen nur den Inhalt des Elements. Selbst wenn es technisch nicht notwendig ist, sollten Sie immer mehrere Elemente in einer Komponente eingeben.

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>

Geige arbeiten: https://jsfiddle.net/k6grqLh1/21/

Bearbeitet

Um es glatter zu gestalten, können Sie Transition-Modes : mode="out-in" verwenden, wodurch die aktuellen Elementübergänge zuerst ausgeführt werden und dann, wenn sie abgeschlossen sind, die neuen Elementübergänge in. Siehe unter Code:

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

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

16
Saurabh

Ich würde auf jeden Fall vorschlagen: https://github.com/asika32764/vue2-animate

Große lib mit AnimateCSS auf VueJS-Übergänge portiert. Ich benutze das mit jedem Projekt und es funktioniert perfekt.

So verwenden Sie v-show mit einem einzelnen Element:

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

Vor allem ... importieren Sie Vue 1 . Wenn Sie Vue 2 importieren, funktioniert diese HTML-Datei

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

Dann sollten Sie docs https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements lesen, wenn Sie sehen möchten, wie Übergänge zwischen Elementen behandelt werden

1
purepear