<style>
#box{
width:100px;
height:100px;
background-color: red
}
@keyframes come-in{
0%{
transform: rotate(45deg);
opacity: 0;
}
50%{
transform: rotate(45deg);
opacity: 1;
}
100%{
transform: rotate(0);
opacity: 1;
}
}
@keyframes come-out{
0%{
transform: rotate(0);
opacity: 1;
}
50%{
transform: rotate(45deg);
opacity: 1;
}
100%{
transform: rotate(45deg);
opacity: 0;
}
}
/* 在transtion标签中使用关键帧动画，只需要设置 enter-active和leave-active两个class即可，在class中设置要执行的动画*/
.ani-enter-active{
animation:come-in 1s;
}
.ani-leave-active{
animation:come-out 1s;
}
#d2{
width:500px;
height:100px;
background-color: rgb(0, 255, 136) ;
}
.com{
animation:come-in 1s;
}
.go{
animation:come-out 1s;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="show">
<transition name="ani">
<div id="box" v-show="show"></div>
</transition>
<!-- 使用关键帧动画，也可以直接在transition标签中直接指定动画所在的class -->
<!-- 这样可以方便的使用第三方动画库（例如animate。css）中的关键帧动画 -->
<transition
enter-active-class="rollIn animated"
leave-active-class="hinge animated">
<div id="d2" v-show="show"></div>
</transition>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
show:false
}
})
</script>
</body>