Résumez et partagez plusieurs méthodes pour mieux contrôler les minuteries à l'aide de CSS

Les minuteries sont utilisées dans de nombreuses situations du travail quotidien, telles que le chargement retardé, les requêtes planifiées, etc. Cependant, le contrôle des minuteries est parfois un peu gênant, comme déplacer la souris pour arrêter, sortir puis redémarrer . Cette fois, je vais présenter quelques méthodes pour mieux contrôler la minuterie à l'aide de CSS. Apprenons-en ensemble, je pense que cela peut apporter une expérience différente. [Apprentissage recommandé : Tutoriel vidéo CSS]

1. Déclencheur de retard de survol

Il existe un scénario dans lequel l'événement est déclenché après que la souris reste sur un élément 1s, ce qui est insatisfaisant 1s ne se déclenchera pas. L'avantage est que cela permet d'éviter le déclenchement fréquent d'événements lorsque la souris se déplace rapidement. S'il est implémenté en utilisant js, cela peut ressembler à ceci1s后才触发事件，不满1s就不会触发，这样的好处是，可以避免鼠标在快速划过时，频繁的触发事件。如果是用js来实现，可能会这样

var timer = null
el.addEventListener('mouseover', () => {
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
    // 具体逻辑
  }, 1000)
})

是不是这样？等等，这样还没完，这样只做到了延时，鼠标离开以后还是会触发，还需要在鼠标离开时取消定时器

el.addEventListener('mouseout', () => {
  timer && clearTimeout(timer)
})

另外，在使用mouseout时还需要考虑 dom 嵌套结构，因为这些事件在父级 -> 子级的过程中仍然会触发，总之，细节会非常多，很容易误触发。

现在转折来了，如果借用 CSS 就可以有效地避免上述问题，如下，先给需要触发的元素加一个有延时的transition

button:hover{
  opacity: 0.999; /*无关紧要的样式*/
  transition: 0s 1s opacity; /*延时 1s */
}

这里只需一个无关紧要的样式就行，如果opacity已经使用过了，可以使用其他的，比如transform:translateZ(.1px)，也是可行的。然后添加监听transitionend方法

GlobalEventHandlers.ontransitionend - Web API 接口参考 | MDN (mozilla.org)

el.addEventListener('transitionend', () => {
  // 具体逻辑
})

这就结束了。无需定时器，也无需取消，更无需考虑 dom 结构，完美实现。

下面是一个小实例，在hover一段时间后触发alert

原理和上面一致，完整代码可以查看线上demo：hover_alert (codepen.io)或者hover_alert(runjs.work)

?以后再碰到这样的需要可以停下来思考一番，很多和mouseover有关的交互都可以用这种方式来实现

二、长按触发事件

长按也是一个比较常见的需求，它可以很好的和点击事件区分开来，从而赋予更多的交互能力。

但是原生js中却没有这样一个事件，如果要实现长按事件，通常需要借助定时器和鼠标按下事件，如下

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 */
}

然后再监听transitionend方法

el.addEventListener('transitionend', () => {
  // 具体逻辑
})

是不是非常方便呢？下面是以前做过的一个小案例，实现了长按触发元素选中

完整代码可以查看线上demo：长按框选 (codepen.io)或者长按框选 (runjs.work)

三、轮播和暂停

再来看一个比较有意思的例子，轮播图。

通常轮播图都会自动播放，然后鼠标hover时会暂停轮播图，通常的做法是这样的

function autoPlay(){
  timer && clearInterval(timer)
  timer = setInterval(function(){
    // 轮播逻辑
  }, 1000)
}
autoPlay()
view.onmouseover = function(){
    timer && clearInterval(timer)
}
el.onmouseout = function(){
    autoPlay()
}

又是定时器的取消和设置，要绑定一堆事件，太烦人了，可以换种方式吗？当然可以了，借助 CSS 动画，一切都好办了。

和前面不太相同的是，这里是setInterval，可以重复触发，那 CSS 中有什么可以重复触发的呢？没错，就是 CSS 动画！当 CSS 动画设置次数为infinite就可以无限循环了，和这个定时器效果非常类似，而且可以直接通过:hover暂停和播放动画。监听每次动画的触发可以用animationiteration

.view {
  animation: scroll 1s infinite; /*每1s动画，无限循环*/
}
.view:hover{
  animation-play-state: paused; /*hover暂停*/
}
@keyframes scroll {
  to {
    transform: translateZ(.1px); /*无关紧要的样式*/
  }
}

N'est-ce pas le cas ? Attendez, ce n'est pas encore fini. Cela ne fait qu'obtenir un délai. Il se déclenchera toujours après le départ de la souris. Vous devez également annuler le minuteur lorsque la souris part🎜

view.addEventListener("animationiteration", () => {
  // 轮播逻辑
})

🎜De plus, lors de l'utilisation de mouseout<.> Vous devez considérer la structure imbriquée <code>dom, car ces événements seront toujours déclenchés pendant le processus parent-> il y aura beaucoup de détails. Il est facile de déclencher par erreur. 🎜🎜Vient maintenant le tournant. Si vous empruntez du CSS, vous pouvez efficacement éviter les problèmes ci-dessus. Comme suit, ajoutez d'abord une <code>transition retardée à l'élément qui doit être déclenché🎜rrreee🎜Ici, il suffit de le faire. un style insignifiant fera l'affaire. Si opacity a déjà été utilisé, vous pouvez en utiliser d'autres, comme transform:translateZ(.1px), ce qui est également réalisable. Ajoutez ensuite la méthode d'écoute transitionend🎜

🎜GlobalEventHandlers.ontransitionend - Référence de l'interface API Web | MDN (mozilla.org)🎜🎜

rrreee🎜C'est tout. Pas de minuterie, pas d'annulation, pas besoin de considérer la structure dom, implémentation parfaite. 🎜🎜Ce qui suit est un petit exemple, qui déclenche une alerte après un survol pendant un certain temps🎜🎜🎜🎜Le principe est le même que ci-dessus. Le code complet est visible dans la démo en ligne : hover_alert (codepen.io)🎜ou hover_alert(runjs.work)🎜🎜

🎜? Si vous rencontrez un tel besoin à l'avenir, vous pouvez vous arrêter et y réfléchir. Beaucoup d'entre eux sont similaires au survol de la souris Des interactions pertinentes peuvent être réalisées de cette manière🎜

2. événement déclencheur d'appui🎜🎜Un appui long est également une exigence relativement courante. Il peut être bien distingué des événements de clic, offrant ainsi des capacités plus interactives. 🎜🎜Mais il n'existe pas de tel événement dans js natif. Si vous souhaitez implémenter un événement de pression longue, vous devez généralement utiliser un événement de minuterie et de pression de la souris. Le 🎜rrreee🎜 suivant est la minuterie et. annuler le minuteur. La scène est quelque peu similaire à l'exemple précédent. Elle peut également être implémentée à l'aide de CSS. Puisqu'il s'agit d'un clic de souris, elle peut être associée à :active. être implémenté comme ça 🎜rrreee🎜 puis écouter transitionend La méthode 🎜rrreee🎜 n'est-elle pas très pratique ? Ce qui suit est un petit cas que j'ai déjà réalisé, qui implémente un appui long pour déclencher la sélection d'un élément🎜🎜🎜🎜Le code complet peut être consulté en démo en ligne : Appui long pour sélectionner la case (codepen.io)🎜ou Appui long pour sélectionner la case (runjs.work)🎜🎜

3. Carrousel et faites une pause🎜🎜Regardons un exemple plus intéressant, le graphique carrousel. 🎜🎜Habituellement, l'image du carrousel sera lue automatiquement, puis l'image du carrousel sera mise en pause lorsque la souris survole La méthode habituelle est comme ceci 🎜rrreee🎜C'est aussi l'annulation et le réglage de la minuterie, ce qui nécessite un tas de liaisons. L'événement est si ennuyeux. Peut-il être fait différemment ? Bien sûr, avec les animations CSS, tout est simple. 🎜🎜Ce qui est différent du précédent, c'est qu'il s'agit de setInterval, qui peut être déclenché à plusieurs reprises. Alors, qu'y a-t-il dans CSS qui peut être déclenché à plusieurs reprises ? C'est vrai, c'est de l'animation CSS ! Lorsque l'animation CSS est définie sur infinite, elle peut boucler à l'infini. L'effet est très similaire à cette minuterie, et l'animation peut être mise en pause et lue directement via :hover. Pour suivre le déclenchement de chaque animation, vous pouvez utiliser la méthode animationiteration, ce qui signifie que chaque cycle d'animation est déclenché une fois🎜

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前端）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!