<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<style>
/*@keyframes bounce-in {*/
/* 0% {*/
/* transform:scale(0);*/
/* }*/
/* 50% {*/
/* transform:scale(1.5);*/
/* }*/
/* 100% {*/
/* transform:scale(1);*/
/* }*/
/*}*/
/*.active {*/
/* transform-origin:left center;*/
/* animation: bounce-in 1s;*/
/*}*/
/*.leave {*/
/* transform-origin:left center;*/
/* animation: bounce-in 1s reverse;*/
/*}*/
</style>
<body>
<section class="app">
<transition name="fade"
enter-active-class="animated flip"
leave-active-class="animated hinge">
<article v-if="show">Selecte</article>
</transition>
<button @click="handle">Option</button>
</section>
<script>
var vm = new Vue({
el:".app",
data: {
show:true
},
methods: {
handle:function () {
this.show = !this.show
}
}
})
</script>
</body>
The above is the animation
Vue use transitions and animation effects
1. page is first loaded style to be displayed
Tags added and transition apper apper-active-class = "animated animation"
2. also has other animations need load in transition label
enter-active-class="animated swin(name) fade-enter-active"
Then write css styles
3. animation execution time who sometimes do not know the subject vue
Labeling requirements in the transition
type = "transition" (how to set another standard)
Custom length:
：during=“1000” （1s）
Long complex custom animation
：during=“{enter: 5000, leave:2000}”