首页 /  技术专区  /  Vue.js 屏幕太窄?试试伸展一下吧 >

Vue使用Animate.css

Animate.css是一款强大的预设css3动画库,Animate.css内置了很多典型的css3动画,兼容性好使用方便。

QQ20201222-114838@2x.png

1、安装引入Animate.css

npm install animate.css --save

2、在main.js中导入并全局使用Animate.css

import animated from 'animate.css'

Vue.use(animated)

3、在要使用动画的class上面加上类名,如:animate__animated animate__backInUp,注意不能缺少前缀animate__animated,第二个animate__后面是动画名称,具体动画名称可以根据实际情况进行设置。

<div class="animate__animated animate__backInUp">

</div>

4、具体动画效果可以查看这里:https://animate.style


下一篇: Maven常用命令

0/200
图片验证码