• 下包
npm install animate.css --save
  • 引入
import animated from 'animate.css' Vue.use(animated)//css.animated {  -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}// fadeInUp 为animate动画库名称 按本人需要来.fadeInUp {  -webkit-animation-name: fadeInUp;  animation-name: fadeInUp;}
  • 成果
    首页滚动是 所有的元素 fadeInUp
  • 代码
window.addEventListener("scroll", this.handleScroll, true);       animatedScroll() {          // 实现当滚动到指定地位，触发动画          let _this = this;          _this.dataListRef.forEach((r, i) => {            _this.gdjz(r.ref, 20, () => {              if (this.$refs[r.ref][0]) {                _this.$refs[r.ref][0].style.display = "flex";              } else {                _this.$refs[r.ref].style.display = "flex";              }            });          });        },                                gdjz(div, offset, callback) {          let dom;          if (this.$refs[div][0]) {            dom = this.$refs[div][0];          } else {            dom = this.$refs[div];          }          if (dom) {            var b, c, d;            d = dom.parentNode.offsetTop; // 元素间隔绝对父级的高度，这里父级指的是body            b =              window.pageYOffset ||              document.documentElement.scrollTop ||              document.body.scrollTop; //  获取窗口滚动条高度            c = document.documentElement.clientHeight || document.body.clientHeight; // 获取浏览器可视区的高度            if (b + c > d) {              callback && callback();            }          }        },
  • 字段阐明
    _this.dataListRef 是所有须要动画的元素

  • 注意事项

    1. 动画（fadeInUp）比须要先暗藏在显示 才会有成果
    2. 搬砖的时候发现 暗藏的元素获取不到 offsetTop 。故此 在写款式的时候须要留神 给每一个动画元素加一个父级盒子站好地位
    3. dom.parentNode.offsetTop 获取父级offsetTop时 须要留神 会受定位的影响 从而拿到谬误的值