<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.myanima-enter-active{
animation:my 1s ease;
}
.myanima-leave-active{
animation:my 1s ease reverse;
}
@keyframes my{
0%{
transform:translate(0px);
}
50%{
transform:translate(100px);
}
0%{
transform:translate(0px);
}
}
</style>
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<div id="app">
<button @click="flag= !flag">点击</button>
<!-- <transition enter-active-class="animated bounceIn" leave-active-class=" animated bounceOut">
<p v-if="flag">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</transition> -->
<!-- 优化后 动画时长 毫秒 :duration="200" :duration="{enter:200,leace:400}"-->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
<!-- animated是animation.css的类 -->
<p v-if="flag" class="animated">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</transition>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
var Vue=new Vue({
el : "#app",
data : {
"flag" :false
}
});
</script>
</html>
vue2之引入动画库
最新推荐文章于 2024-04-15 22:11:57 发布