|
详细请参考官网：动画.css |CSS 动画的跨浏览器库。 (animate.style)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用ainmate.css</title>
<script src="../js/vue.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<!-- <style>
@keyframes name{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.v-enter-active{
transform-origin: left center;
animation: name 1s;
}
.v-leave-active{
transform-origin: left center;
animation: name 1s reverse;
}
</style> -->
<body>
<div id="app">
<transition name='fade' enter-active-class="animate__animated animate__bounce" leave-active-class="animate__animated animate__bounce">
<div v-if="a">你好世界！！</div>
</transition>
<button @click="btn">消失</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
a:true
},
methods:{
btn:function(){
this.a =! this.a
},
}
})
</script>
</body>
</html>
|