ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を利用してタイマーをより適切に制御するためのいくつかの方法を要約して共有します。
タイマーは、遅延読み込みやスケジュールされたクエリなど、日常業務のさまざまな場面で使用されますが、マウスの操作など、タイマーの制御が少し面倒になることがあります。移動して停止し、削除して再度開始します。今回はCSSを使ってタイマーをコントロールする方法をいくつか紹介しますので、ぜひ一緒に学んでみてください。 [推奨学習: css ビデオ チュートリアル ]
マウスが要素上に留まると、このようなシーンがあります。イベントは 1s 後にトリガーされ、
1s に満足しない場合はイベントがトリガーされないため、マウスの動きが速い場合にイベントが頻繁にトリガーされることを回避できるという利点があります。
jsで実装するとこんな感じになるかも知れません
var timer = null el.addEventListener('mouseover', () => { timer && clearTimeout(timer) timer = setTimeout(() => { // 具体逻辑 }, 1000) })こんな感じではないでしょうか?待ってください、これはまだ終わっていません。これは遅延を実現するだけです。マウスが離れた後もトリガーされます。また、マウスが離れたときにタイマーをキャンセルする必要があります。
el.addEventListener('mouseout', () => { timer && clearTimeout(timer) })さらに、
は使用していますmouseoutこれらのイベントは
parent->child プロセス中に引き続きトリガーされるため、
dom ネスト構造 についても考慮する必要があります。 、詳細がたくさんあり、誤ってトリガーするのは簡単です。
transition
button:hover{ opacity: 0.999; /*无关紧要的样式*/ transition: 0s 1s opacity; /*延时 1s */ }を要素に追加します。トリガーする必要があります。ここでは無関係なスタイルを 1 つだけで十分です。
opacity がすでに使用されている場合は、
transform:translateZ(.1px) などの他のスタイルを使用できます。も実現可能です。次に、リスナー
transitionendmethod
domGlobalEventHandlers.ontransitionend - Web API インターフェイス リファレンス | MDN (mozilla.org)
el.addEventListener('transitionend', () => { // 具体逻辑 })# を追加します。 # #これで終わりだ。タイマーやキャンセルはなく、
構造を考慮する必要もなく、完璧な実装です。 以下は小さな例で、
を一定期間続けた後にトリガーされますアラート
原則は上記と一致しており、完全なコードはオンライン デモでご覧いただけます:
hover_alert (codepen.io) ? 今後、この問題に再び遭遇する可能性がありますか? 必要に応じて、立ち止まって考えることができます。mouseoverしかし、ネイティブに関連する多くのインタラクションは、この方法で実装できます。 2. 長押しトリガー イベント
長押し 押すことも比較的一般的な要件であり、クリック イベントと明確に区別できるため、よりインタラクティブな機能が得られます。
el.onmousedown = function(){ this.timer && clearTimeout(this.timer); this.timer = settimeout(function(){ //业务代码 },1000) } el.onmouseup = function(){ this.timer && clearTimeout(this.timer); }再びタイマーとタイマーキャンセルのシナリオは前の例と似ています。CSS を使用して実装することもできます。マウスが押されているため、
:active に関連付けることができます。このように実装できます
button:hover:active{ opacity: .999; /*无关紧要的样式*/ transition: opacity 1s; /*延时 1s */ }それからもう一度聞いてください
transitionendmethod
el.addEventListener('transitionend', () => { // 具体逻辑 })とても便利ではないでしょうか?以下は、私が以前に行った小さなケースで、長押しトリガー要素の選択を実装しています。
完全なコードはオンライン デモでご覧いただけます:
長押しボックスの選択 (codepen.io)orボックスを長押しして選択 (runjs.work)
3. カルーセルと一時停止さらに見てみましょう興味深い例として、カルーセル画像があります。
通常、カルーセル画像は自動的に再生され、マウスfunction autoPlay(){ timer && clearInterval(timer) timer = setInterval(function(){ // 轮播逻辑 }, 1000) } autoPlay() view.onmouseover = function(){ timer && clearInterval(timer) } el.onmouseout = function(){ autoPlay() }また、タイマーのキャンセルと設定では大量のイベントをバインドする必要がありますが、これは非常に面倒です。別の方法を試してみることはできますか?もちろん、CSS アニメーションを使用すると、すべて簡単です。
は前と同じではありません。ここでは、繰り返しトリガーできる
setInterval
CSSアニメーション
です! CSS アニメーションがinfinite に設定されている場合、無限にループすることができます。効果はこのタイマーと非常によく似ており、
:hover を通じてアニメーションを一時停止したり、直接再生したりできます。各アニメーションのトリガーを監視するには、animationiteration メソッドを使用できます。これは、各アニメーション サイクルが 1 回トリガーされることを意味します
GlobalEventHandlers.onanimationiteration - Web API 接口参考 | MDN (mozilla.org)
所以用这种思路实现就是
.view { animation: scroll 1s infinite; /*每1s动画,无限循环*/ } .view:hover{ animation-play-state: paused; /*hover暂停*/ } @keyframes scroll { to { transform: translateZ(.1px); /*无关紧要的样式*/ } }
然后再监听animationiteration
事件
view.addEventListener("animationiteration", () => { // 轮播逻辑 })
是不是省去了大半的js
代码?而且也更好理解,控制也更为方便。
下面是一个通过animationiteration
来代替setInterval
实现的轮播图
完整代码可以查看线上demo:CSS banner(codepen.io)或者css_banner(runjs.work)
以上就是你可能不需要定时器的几个替代方案,相比定时器而言,CSS 在控制定时器的开启和暂停上更有优势,下面总结一下
:hover
配合transition
延时、transitionend
监听可以实现鼠标经过延时触发效果
:active
配合transition
延时、transitionend
监听可以实现长按触发效果
CSS 动画设置infinite
后配合animationiteration
监听可以实现周期性触发效果
可以直接通过:hover
来控制台动画的暂停和播放
当然,可以利用的不仅仅是以上几个案例,任何和 CSS 交互(:hover
、:active
)有类似功能的都可以朝这个方向去思考,是不是可以实现地更加优雅?
(学习视频分享:web前端)
以上がCSS を利用してタイマーをより適切に制御するためのいくつかの方法を要約して共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。