javascript / intermediate
Snippet
Scripted Animations with JavaScript Transition Hooks
By setting :css="false" on a Transition component, you can disable CSS detection and gain full programmatic control over animations using JavaScript hooks like @enter and @leave.
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
Breakdown
1
:css="false"
Tells Vue to skip CSS transition detection for better performance in JS animations.
2
(el, done) => { ... done() }
The 'done' callback must be called to signal that the animation has finished.