写过的PC动画效果 animate + vue

空脑壳
  • 下包
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时 需要注意 会受定位的影响 从而拿到错误的值
阅读 860

东看西看记不住

11 声望
2 粉丝
0 条评论

东看西看记不住

11 声望
2 粉丝
文章目录
宣传栏