vue --- > 使用animate.css实现动画
程序员文章站
2024-03-25 12:55:22
...
1.下载animate.css
npm install --save-dev animate.css
// 注意你使用的源 nrm ls(若没有改变可以忽略)
2.导入animate.css
<link rel="stylesheet" href="../node_modules/animate.css/animate.css">
// 注意你的当前文件和node_moudules文件夹的相对位置
3.动画需要绑定<transition>内
<transition enter-active-class="bounceInRight" leave-active-class="bounceOutRight" :duration="{enter:1000, leave:1200}">
<h1 v-show="flag" class="animated"> 这是一个H1</h1>
</transition>
// 1. vue中,动画需放在transition里面.
// 2.enter-active-class是入场的动画类,可以通过animate.css官网查看.
// 3.所有动画类必须基于一个animated基类
4.总体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../node_modules/animate.css/animate.css">
</head>
<body>
<div id="app">
<button @click="flag=!flag">点击</button>
<transition enter-active-class=" bounceInRight" leave-active-class=" bounceOutRight" :duration="{enter:1000, leave:1200}">
<h3 v-show="flag" class="animated">这是一个H3</h3>
</transition>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
},
})
</script>
</body>
</html>