当前位置: 首页 > Web前端 > vue.js

Animate.css动画库使用

时间:2023-03-31 20:45:37 vue.js

本文记录Animate.css动画库的使用方法和步骤Animate.css是一个非常牛逼的动画库,你可以依靠这个库来使用炫酷的动画效果。这是Animate.css的官网(https://animate.style/)提示:初始加载可能会比较慢第一步:安装Animate.css库首先我们需要安装Animate.css,在里面输入npminstallanimate控制台。css第二步:引入Animate.css库,在要使用的文件中输入import"animate.css"第三步:使用Animate.css库,在要使用的元素节点配置“animate__animatedanimate__bounce”,然后找到官网上你喜欢的动画,直接复制名字,添加到目标元素节点对应的动画类属性中即可。在vue中的transition标签中显示动画属性名“enter-active-class”,隐藏动画属性名“leave-active-class”。下面是一个vue代码的例子:>过渡动画注意~~~~~~~~~~~~~~~~~显示/隐藏