効果を達成する
Webページの各セクションのローディングアニメーションに似た効果で、スクロールバーをスライドさせて特定のセクションに表示すると、現在範囲内にあるセクションが、設定されたアニメーションとアニメーション時間に従って表示されます。
※animate.cssと連携した方が良い
1.wow.jsをインストール
npm install wow.js --save
2. animate.css をインストールする
npm install animate.css --save
3.アニメーションを使用する
在main.ts中
使用animate.css的方式
import "animate.css/animate.min.css";
使用wow中animate的方式
import "wow.js/css/libs/animate.css";
4.使用する必要のあるページでwow.js を使用する
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 構成
data-wow-duration（动画持续时间)
data-wow-delay（动画延迟时间）
data-wow-offset（元素的位置露出后距离底部多少像素执行）
data-wow-iteration（动画执行次数）
例：
<section class="section wow animate__animated animate__fadeInLeft"
data-wow-duration="2s"
data-wow-offset="200"
data-wow-iteration="3"
>
我是板块
</section>
拡張機能: データの読み込み時にブラウザが底をつく
アイデア:
1. ブラウザが底を打ったときに関数をトリガーする;
2. アンチシェイク (スロットリング) を使用し、底を打つたびに 1 秒後に関数をトリガーする
スクロールバーの一番下を聞くと
滚动条函数
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);
};
要約する
wow.js特徴は、要素のオフセットを制御してアニメーションをトリガーできることで、vue-animate-onscroll昨日推奨されたものよりも優れていますが、同じようにはなりませんvue-animate-onscroll.要素がウィンドウの可視範囲を離れると、再入力が制御されます.再びアニメーション表示。この2点が組み合わさって、実際に自分でできるようになればいいのですが、世間一般的には、最初に要素をロードするときのアニメーションだけで十分です。