vue transition in component code example
Example: vue transition
<transition name="wrapper">
<span v-if="show"></span>
</transition>
<script>
export default {
data () {
return {
show: true
}
}
</script>
<style scoped>
.wrapper-enter-active {
animation: finished 2.5s reverse;
}
.wrapper-leave-active {
animation: finished 2.5s;
}
@keyframes finished {
0% { opacity: 1; top: 0;}
50% { opacity: 1; top: 0;}
60% { opacity: 1; }
100% { opacity: 0; top: -100vh;}
}
</style>