achieve effect
The effect is similar to the loading animation of each section of the web page. When you control the scroll bar to slide to a certain section for display, the section currently within the range will be displayed according to the set animation and animation time.
Note: It is better to cooperate with animate.css
1. Install wow.js
npm install wow.js --save
2. Install animate.css
npm install animate.css --save
3. Use animate
在main.ts中
使用animate.css的方式
import "animate.css/animate.min.css";
使用wow中animate的方式
import "wow.js/css/libs/animate.css";
4. Use wow.js,
on the page that needs to be used
onMounted() {
new this.$wow.WOW().init()
或者自由配置
new WOW({
boxClass: "wow", // 我理解为wow自带类名
animateClass: "animated", // 看成animate的类名
offset: 100, //元素距浏览器底部偏移量
mobile: true, // 是否在移动端奏效
live: false, // 是否热更新元素
callback: function (box) {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
},
scrollContainer: null, // optional scroll container selector, otherwise use window,
resetAnimation: true, // reset animation on end (default is true)
}).init();
}
wow.js configuration
data-wow-duration（动画持续时间)
data-wow-delay（动画延迟时间）
data-wow-offset（元素的位置露出后距离底部多少像素执行）
data-wow-iteration（动画执行次数）
example:
<section class="section wow animate__animated animate__fadeInLeft"
data-wow-duration="2s"
data-wow-offset="200"
data-wow-iteration="3"
>
我是板块
</section>
Extension: Browser bottoms out on loading data
Ideas:
1. Trigger the function when the browser bottoms out;
2. Use anti-shake (throttling), and trigger the function after one second each time it bottoms out
When listening to the bottom of the scroll bar
滚动条函数
const handleScroll = () => {
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
//变量windowheight是可视区的高度
var windowheight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollheight是滚动条的总高度
var scrollheight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 到达底部时
if (scrolltop + windowheight == scrollheight) {
//写后台加载数据的函数
//防抖
deBounce(LazyMsg, 1000)
//节流
throttle (LazyMsg, 1000)
}
}
监听滚动条
onMounted(() => {
window.addEventListener('scroll', handleScroll, true);
})
销毁监听监听
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll, true);
})
防抖：
var timer = null;
const deBounce = (fn, delay) => {
clearTimeout(timer);
timer = setTimeout(function () {
fn();
}
// 节流
var timer2 = null;
const throttle = (fn, delay) => {
if (timer2) {
return;
}
timer2 = setTimeout(function () {
fn();
timer2 = null;
}, delay);
};
Summarize
wow.jsThe feature is that it can control the offset of the element to trigger the animation, which is better than what was recommended yesterday vue-animate-onscroll, but it cannot be like the vue-animate-onscrollsame. When the element leaves the visible range of the window, re-entering will control the animation display again. It would be great if these two points can be combined, and you can actually do it yourself, but from the public's point of view, generally only the animation when the element is loaded for the first time is enough.