- 下包
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 是所有须要动画的元素 -
注意事项
- 动画(fadeInUp)比须要先暗藏在显示 才会有成果
- 搬砖的时候发现 暗藏的元素获取不到 offsetTop。故此 在写款式的时候须要留神 给每一个动画元素加一个父级盒子站好地位
- dom.parentNode.offsetTop 获取父级 offsetTop 时 须要留神 会受定位的影响 从而拿到谬误的值