vue过度动画基础，结合animate.css库使用
程序员文章站
2024-03-25 14:35:22
...
先附上vue官方文档，基础部分有需要的朋友自己看下：
vue官方动画基础
如果没看懂官方文档的，可以再看下我改的小demo：
这部分已熟悉的可以跳过这一段，看最下面的
上效果
animate.css效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 190px;
height: 190px;
background: orange;
}
.don-enter-active {
transition: opacity 2s;
}
.don-enter {
opacity: 0.01;
background: orange;
}
.don-leave-active {
transition: opacity 2s;
}
.don-leave-to {
opacity: 0.01;
}
</style>
</head>
<body>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="don">
<p v-if="show">hello</p>
</transition>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
嗯，从这里开始，没错：
animate.css库 这个可以一会看，先把下面代码跑一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 这里引入animate.css -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
p{
width: 190px;
height: 190px;
background: orange;
}
</style>
</head>
<body>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<!-- 替换这里即可 --> <!-- 替换这里即可 -->
<transition enter-active-class="animate__animated animate__flash" leave-active-class="animate__animated animate__bounce">
<p v-if="show">我年各省的发生的</p>
</transition>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
上一篇： React过渡动效-react-transition-group
下一篇： 范围 for 语句