<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>
上面是動畫效果
Vue同時使用過渡和動畫效果
1.頁面首次加載需要顯示的樣式
transition標簽中 加apper和 apper-active-class=“animated 動畫效果”
2.同時擁有別的動畫效果 需要在transition label load
enter-active-class="animated swin(name) fade-enter-active"
然后寫css樣式
3.動畫執行時間以誰的為准 vue有時候也不清楚
transition標簽內規定
type=“transition” (如何設置以另一種為標准)
自定義時長：
：during=“1000” （1s）
復雜自定義動畫播放時長
：during=“{enter: 5000, leave:2000}”