【学习笔记】借助CSS来做定时器

(づど)

已于 2024-08-30 04:13:09 修改

阅读量915

点赞数 14

分类专栏：前端开发入门文章标签：学习笔记 css

于 2024-08-30 04:10:51 首次发布

本文为博主原创文章，转载必须注明来源

本文链接：https://blog.csdn.net/qq_36888550/article/details/141691602

版权

前端开发入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

此文学习对象：

《还在用定时器吗？借助 CSS 来监听事件》作者： XboxYan，微信公众号：前端侦探

setTimeout平替：transition和transitionend

基本原理

定时器的组成条件：定时+触发

css正好有个和这俩都有关的属性：transition和它的监听事件 transitionend ：

- transition：过渡动效（如果不想让用户发现，可以做不明显的动效）

- transitionend：transition+end，过渡动效完成时触发；如果动效在完成前就被移除，就不会触发事件（比如删除 transition-property 或者将 display 设置为 none）。

总结：触发元素的动效，几秒后就可以触发事件 =定时器

其他事件：transitionrun 动效创建时、transitionstart 动效实际开始时、transitioncancel 动效取消时

触发时机

- hover：鼠标悬停超过几秒触发

- active：鼠标按下几秒后触发 =长按

- focus：鼠标点击后，再过几秒触发 =延迟触发（有个小bug，按钮保持focus，每次页面切换都会重复触发，所以事件触发后要移除 transition-property ）

最简单的栗子

代码里的focus换成hover、active都可以触发

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button id="timer">延时器 hover</button>
</body>
<style>
  button{
    opacity:1;
  }
  button:focus{
    opacity:0.99;
    transition: opacity 1s;
  }
</style>
<script>
  const btn = document.getElementById('timer')
  btn.addEventListener('transitionend',()=>{
    console.log('触发事件')
  })
</script>
</html>