javascript / intermediate
Snippet
Skriptbasierte Animationen mit JavaScript-Transition-Hooks
Durch das Setzen von :css="false" bei einer Transition-Komponente können Sie die CSS-Erkennung deaktivieren und die volle programmatische Kontrolle über Animationen mithilfe von JavaScript-Hooks wie @enter und @leave erhalten.
snippet.js
javascript
1
2
3
4
5
6
<Transition@enter="(el, done) => { animate(el, { opacity: 1 }, { onComplete: done }) }":css="false"><p v-if="visible">Fade In</p></Transition>
vue
Erklärung
1
:css="false"
Teilt Vue mit, die CSS-Transition-Erkennung zu überspringen, um eine bessere Performance bei JS-Animationen zu erzielen.
2
(el, done) => { ... done() }
Der 'done'-Callback muss aufgerufen werden, um zu signalisieren, dass die Animation beendet ist.