<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}”