很多公司门户都有动画效果，就是鼠标滚动到某个位置，页面内容从下向上有个动画，类似这种，今天用到了一个动画插件，记录一下
aos.js
dependencies
"aos": "^3.0.0-beta.6",
使用方法也非常的简单
在vue页面中
import AOS from 'aos'
import 'aos/dist/aos.css' // You can also use <link> for styles
AOS.init()
在div标签上配置上属性即可
<div data-aos="fade-right" data-aos-once="true">
//补充：data-aos="fade-right" form left to right 从左到右
//补充：data-aos-once="true" 只生效一次
这样，门户首页的动画效果就实现了
分享链接
aos.js演示效果
http://michalsnik.github.io/aos/
具体配置，基本和css3动画配置名称类似，简单易懂
https://github.com/michalsnik/aos#animations
网友评论