Übergang von Vue.js zu js-Implementierung

Dieses Mal werde ich Ihnen den Übergang von Vue.js zu js vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue.js zur Implementierung des Übergangs?

<template>
  <div>
    <button>Toggle</button>
    <div>
      <transition>
        <p>i am show</p>
      </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
 {        show: true
      }
    },    methods: {//      
动画
执行的起始位置
      beforeEnter: function (el) {
        $(el).css({          left: &#39;50px&#39;,          opacity: 0
        })
      },      enter: function (el, done) {
        $(el).animate({          left: &#39;200px&#39;,          opacity: 1
        }, {          duration: 1500,          complete: done
        })
      },      leave: function (el, done) {
        $(el).animate({          left: &#39;500px&#39;,          opacity: 0
        }, {          duration: 1500,          complete: done
        })
      }
    }
  }</script><style>.animate-p {  
position
: absolute;  top: 100px;  left: 0;
}</style>

Wenn die Beschriftung ausgeblendet ist, wird die Leave-Animation ausgeführt.
Wenn die Beschriftung angezeigt wird, wird die BeforeEnter- und Enter-Animation ausgeführt.

js-Übergangsanimation

Als ich die Ele.me-App zum Mitnehmen kennenlernte, stellte ich fest, dass das Schreiben auf diese Weise auch möglich ist:
Übergang hinzufügen

<div v-show="detailShow" class="detail" transition="fade">

zum Etikett im CSS-Code animiert werden

   .detail
      ......
      &.fade-transition
        opacity: 1        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0        background: rgba(7, 17, 27, 0)

Auf diese Weise können Sie ganz einfach eine Animation mit übermäßiger Hintergrundtransparenz implementieren

Ich glaube, Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Berechnete Eigenschaften und Datenüberwachung von Vue.js

Ereignisbindung von Vue.js – Gebaut -in-Ereignisbindung, benutzerdefinierte Ereignisbindung

Synchronisierte Aktualisierungsmethode für Listendaten in Vue.js

Vue. js-Listenrendering v-for-Array-Objekt-Unterkomponente

Das obige ist der detaillierte Inhalt vonÜbergang von Vue.js zu js-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!