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.
<html>
<head>
<style type="text/css">
div.slider{
width:100%;
height: 300px;
overflow-x:hidden;
overflow-y:hidden;
border-bottom:1px solid #000000;
}
div.slider-item{
background-color:#44AAAA;
width:100%;
height:100%;
animation-name: slide-in;
animation-duration: 4s;
}
@-moz-keyframes slide-in{
0%{opacity: 0;margin-left:100%;}
20%{margin-left:0%;}
100%{opactiy:1;}
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-item"></div>
</div>
</body>
</html>
einblenden: opacity 0 auf 1
von links: margin-left 100% auf 0%
von-rechts: margin-right 100% auf 0%
wachsen lassen: scale(0) auf scale(1)
schrumpfen lassen: scale(2) auf scale(1)
Ein Snap-In Effekt:
@-moz-keyframes snap-in{
0%{transform:scale(1.2);opacity:0;}
50%{opacity:0.2;}
95%{transform:scale(0.9);opacity:1;}
100%{transform:scale(1)}
}