Please enable JavaScript.
Coggle requires JavaScript to display documents.
Animation & Transition - Coggle Diagram
Animation & Transition
-
-
-
Transition events
-
enterHandler(el, done){
let round = 1;
const interval = setInterval(function(){
el.style.opacity = round * 0.01;
round++;
if(round > 100){
clearInterval(interval);
done(); //signal that enter phase has done
}
}, 20)
}
-
same for before-leave, leave and after-leave
-
-
exception for having multiple elements inside transition element: guarantee only one element is inside
<transition>
<button v-if="isVisible">show</button>
<button v-if="!isVisible">hide</button>
</transition>
-
-
<transitionGroup tag="ul" name="user-list">
<li v-for="user in users" key="user">{{user}}</li>
</transitionGroup>
same css class:
user-list-enter-from,
user-list-enter-to,
user-list-enter-active...
-
router animation
<router-link v-slot="slotProps"><transition name="route" mode="out-in"><component :is="slotProps.Component">
</transition>
</router-link>
-