<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中css动画的原理</title>
<script src="script/vue.js"></script>
<style>
@keyframes bounce{
0%{transform: scale(0);}
50%{transform: scale(1.5);}
100%{transform: scale(1);}
}
/* .fade-enter-active和.fade-leave-active代表一直都在的那个时间点 */
.fade-enter-active{
transform-origin: left center;
animation: bounce 1s;
}
.fade-leave-active{
transform-origin: left center;
animation: bounce 1s;
}
</style>
</head>
<body>
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="click">切换</button>
</div>
<script>
var root = new Vue({
el : '#root',
data:{
show:true
},
methods:{
click:function(){
this.show = !this.show;
}
}
})
</script>
</body>
</html>
Vue.js使用keyframes动画
猜你喜欢
转载自blog.csdn.net/qq_39148344/article/details/84205036
今日推荐
周排行