首先在main.js引入animat.cssimport './assets/css/animate.min.css';
然后在模板中直接使用即可:
点我展示效果
hello
daliycode.com
www
daliycode
com
www.daliycode.com
www.daliycode.com
...
data() {
return {
show: true,
step: 1,
};
},
methods: {
test() {
this.show = !this.show
switch (this.step){
case 1:
this.step = 2
break;
case 2:
this.step = 3
break;
default:
this.step = 1
break;
}
}
}
上面只是列举了animat.css几种动画效果,更多animat.css效果参考这篇文章:css动画库animate.css
vue+animat.css详细使用教程可参考:vue css动画