Vue: Animations einbauen

Mit Vue.js kann man relativ einfach und schnell normale CSS3-Animations mit den State-Übergängen von Elementen verknüpfen.


<transition name="dialogbox">
<div class="overlay-content card" v-if="textDialog.show">
<h4 class="text-center card-header">{{ textDialog.title }}</h4>
<div class="text-field card-body">
{{ textDialog.content }}
</div>
<div class="text-center card-footer">
<button v-on:click="closeDialogs" class="btn btn-dark">close</button>
</div>
</div>
</transition>


Durch die Transition-Tag wird das Element eingeschlossen, dessen Änderung mit der Animation verknüpft werden soll. Der Name ist der der erste Teil des Animationsnamens.


.dialogbox-enter-active {
animation: open 0.8s;
}

.dialogbox-leave-active {
animation: open 0.4s reverse;
}

@keyframes open {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}


die erste Klasse wird beim Anzeigen verwendet und die zweite, wenn das Element aus dem DOM entfernt wird.

Neben v.id geht auch v-show.
User annonyme 2019-07-25 21:51

write comment:
Six + = 14

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?