背景

在日常的项目开发中，我们会很经常的遇见如下的需求：

  • 在浏览器页面中，当鼠标移动到某个部分后，另一个部分在延迟若干时间后出现
  • 在鼠标移除该区域后，另一部分也在延迟若干时间后消失

我相信这是一个很常见的一个需求，有很多种方式能够实现，但是，其实现方式的原理各不相同，也有利有弊。

实现方案

CSS

在CSS中，有一个伪类hover也能够监听鼠标移动到某个元素上面，因此我们也可以利用CSS来实现我们刚刚的功能。

我们需要使用的是CSS3中的新特性：transition。

transition是一个简写属性，可设置transition-property, transition-duration, transition-timing-function, transition-delay。 transition用来定义元素两种状态之间的过渡。不同状态可以用 pseudo-classes 定义，比如 :hover 、:active或使用JavaScript设置。

该属性第一个值为需要变化的属性值，第二个值为其持续时间，第三个值为变化方式，第四个值为其延时。该属性指定的值只要指定的属性有任何变化，都会触发该属性。即在从该样式到其他样式，以及其他样式回到该样式时都会产生效果。例如：

transition:opacity 1s linear 1s;
复制代码

具体介绍请看MDN官方介绍。

现在，让我们用transition属性来实现上面的功能。简单点如下所示：

//HTML文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/index.css">
</head><body><div id="container"><div id="div1"></div><div id="div2"></div></div>
</body></html>
复制代码
//Sass文件
#container {display: inline-block;#div1 {width: 100px;height: 100px;background-color: #000;}#div2 {visibility: hidden;opacity: 0;width: 100px;height: 100px;background-color: #F00;transition-delay: 0.5s;}&:hover {#div2 {visibility: visible;opacity: 1;}}
}
复制代码

通过在CSS中添加transition-duration，我们可以实现延时显示的目的。并且，我们不需要自己去清除定时器，而由浏览器来判别。

在此，我们为什么不用display属性呢，因为在display改变时，transition并不会生效。

那我们为什么需要在使用了opacity属性的时候同时使用visibility属性呢。因为opacity属性只是让元素变得透明，而不会让元素消失。如果不加速visibility属性的话，那元素变透明后仍然可以点击，那么会出现一些奇怪的影响。

到目前为止，我们利用CSS完全模拟了第一部分我们使用JavaScript实现的功能，而且看上去更简洁。那么，下面我们来讲一些更加复杂的功能有助于大家理解transition。

Transition进阶

现在我们需要在鼠标移动上去后，出现一个渐变的效果，让另一框慢慢出现，同时在鼠标移出的时候也有渐变消失的效果，那么我们就需要来使用一下transition的另外几个属性。

在上面的代码中稍加改动，就能够得到我们需要的效果。

transition: opacity 0.5s linear;
复制代码

这样的话，在鼠标移入的时候，会有一个渐变的效果。但是，问题也出现了，在鼠标移出的时候，div2立马就消失了。让我们来分析一下鼠标移入和移出时的效果。

当鼠标移入时：

  1. 鼠标移入div1元素
  2. 触发了hover事件，div2的visibility属性变为visible
  3. transition属性让opacity属性从0变为1

而当鼠标移出时：

  1. 鼠标移出div1元素
  2. hover事件停止触发，div2的visibility属性变为hidden
  3. transition属性让opacity属性从1变为0

根据上面的情况我们知道，当hover事件结束后，visibility属性立马就变成了hidden了，因此后面的动画效果就无法看到了。

那么如果我们为visibility属性也加上延时呢，能不能够达到我们的目标，让我们来看一下效果。

transition: visibility 0s linear 0.5s, opacity 0.5s linear;
复制代码

代码改动为如上情况后，我们会发现，当鼠标移出的时候，能够看到动画效果。但是当鼠标移入时，动画效果消失了，现在再让我们来分析下为什么会出现这个情况。

当时鼠标移入时：

  1. 鼠标移入div1元素
  2. 触发hover事件
  3. transition属性让opacity属性从0变为1
  4. visibility属性变为visible

当鼠标移出时：

  1. 鼠标移出div1元素
  2. hover事件停止触发
  3. transition属性让opacity属性从1变为0
  4. visibility属性变为hidden

从上面的分析我们可以知道，因为visibility属性为不连续变化属性，因此在transition中只有transition-delay对该属性产生了效果。所以visibility属性延时了0.5s执行，导致了在鼠标移入时看不到效果。

那么，我们有没有办法同时在鼠标移入和移出的时候同时看到动画效果呢。需要达到这个目的，其实换一个思路立马就能够解决。我们不只需要在hover事件中重置这个延时，将其重新指定为0，马上就能够达到我们想要的效果。具体示例代码如下：

#container {display: inline-block;#div1 {width: 100px;height: 100px;background-color: #000;}#div2 {visibility: hidden;opacity: 0;width: 100px;height: 100px;background-color: #F00;transition: visibility 0s linear 0.5s, opacity 0.5s linear;}&:hover {#div2 {visibility: visible;opacity: 1;transition-delay: 0s;}}}
复制代码

那么现在让我们来分析下为什么这么写能够达到我们需要的效果。

当鼠标移入时：

  1. 鼠标移入div1
  2. hover事件触发，重新指定transition属性的transition-delay为0s，visibility属性由hidden立马变成visible
  3. transition属性让opacity属性由0变为1

当鼠标移出时：

  1. 鼠标移出div1
  2. hover事件停止触发，transition延时恢复到0.5s，因此visibility属性不会马上触发
  3. transition属性让opacity属性由1变为0
  4. visibility属性由visible变为hidden

我们通过一个很简单巧妙的方法，通过改变transition-delay，从而让visibility属性立即执行，达到了我们需要的效果。

JavaScript

附上利用JS来实现该方案的代码用于参考。这个其实应该是大部分人会想到的方法，利用mouseover或者click事件来进行事件的监听，利用setTimeout来进行延时处理，例如这样：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 100px;height: 100px;background-color: #000;}#div2 {display: none;width: 100px;height: 100px;background-color: #F00;}</style>
</head><body><div id="div1"></div><div id="div2"></div><script>document.addEventListener('DOMContentLoaded', function () {var div1 = document.getElementById('div1');var div2 = document.getElementById('div2');div1.addEventListener('mouseover', function () {setTimeout(function () {div2.style.display = 'block';}, 500);});div1.addEventListener('mouseleave', function () {setTimeout(function () {div2.style.display = 'none';}, 500);});});</script>
</body></html>
复制代码

但是上面这个代码有一个比较严重的问题，就是当鼠标两次移动上去的间隔小于500ms时，上一次的setTimeout的代码还是会触发，因此会看到一次闪动的效果。

因此，我们需要在检测到两次间隔小于500ms时，清除掉上次的setTimeout的代码。所以，改动代码如下(注：如有表现与描述不一致请看文章末尾说明):

div1.addEventListener('mouseover', function () {clearTimeout(handle);setTimeout(function () {div2.style.display = 'block';}, 500);
});var handle = 0;
div1.addEventListener('mouseleave', function () {handle = setTimeout(function () {div2.style.display = 'none';}, 500);
});
复制代码

调整为上述代码之后，基本可以满足我们的需求。后续如果需要添加动画之类的操作，也只需要继续像代码添加相关逻辑即可，在此就不再演示。

总结

在需求开发的过程中，遇到了这个问题。最开始用JavaScript实现，开发起来比较复杂，容易与业务逻辑代码混在一起不好维护。通过CSS来实现这个功能，既简单高效，又能够避免增加JavaScript复杂度，是一个比较优的解决方案。

参考

  • CSS3 transitions using visibility and delay(英文)
  • transition过渡
  • transition示例

说明

jsbin是一个在线的编辑器，能够在代码编写完成后马上看到效果，但是该文中有部分代码在jsbin中出现表现与本地不一致的情况(例如CSS进阶中最后一个代码)，大家可以将代码放到本地验证。由于代码效果时好时坏，猜测可能与jsbin的容器相关。

CSS transition delay简介与进阶应用相关推荐

  1. CSS transition 的默认值

    语法 transition: property duration timing-function delay|initial|inherit; 示例: div {width: 100px;height ...

  2. 利用css transition属性实现一个带动画显隐的微信小程序部件

    我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...

  3. [css] transition、animation、transform三者有什么区别？

    [css] transition.animation.transform三者有什么区别? transition:比较简单的过度动画animation: 使用keyframe自定义动画,比较详细的动画过 ...

  4. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  5. css transition改动透明,使用CSS transition和animation改变渐变状态的实现方法

    到目前为止,CSS的渐变属性 linear-gradient 和 radial-gradient 已经是很成熟的CSS特性了,而且 repeating-linear-gradient 和 conic- ...

  6. CSS transition（过渡效果）详解

    CSS transition(过渡效果)详解 通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...

  7. css transition兼容性,CSS3 Transition详解和使用

    Transition 简介 Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性. transition-property 用于指定应用过渡属性的名称 transition-dur ...

  8. CSS Transition

    过渡 transition transition属性用于设置元素的过渡动画交互效果 transition是一个简写属性(复合属性),用于设置四个过渡属性分别是transition-property.t ...

  9. css transition过渡

    css过渡效果 transition设置过渡,transition的属性包括如下图: 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性. transition-proper ...

最新文章

  1. linux之pid文件
  2. .exp文件_mini_httpd 任意文件读取漏洞(附EXP脚本)
  3. 第6章 数组、指针与字符串（一）基于范围的for循环
  4. iBatis SqlMap的配置总结
  5. Jdk1.8新特性(一) 接口的default方法
  6. ubuntu17.04 调试系统工具bcc,systamtap安装
  7. springboot导包显示不存在_基础篇：Spring Boot入门体验（图文教程）
  8. 基于日志的交换机故障预测
  9. 大数据(3) - 高可用 HDFS HA
  10. Fiddler-半自动构造少量数据
  11. 简述Python类中的 __init__、__new__、__call__ 方法
  12. reactbootstrap php,什么是React-Bootstrap
  13. zynq以太网官网例子调试
  14. VLAN链路类型和接口类型
  15. Microsoft Word For Mac 分节符
  16. jQuery实现验证码60秒倒计时
  17. 小学生能学计算机编程是什么,小学生为什么要学编程？小学生学习编程怎么样？...
  18. 关于GTP-4，这是14个被忽略的惊人细节！
  19. html怎么垂直对其,html – 垂直对齐方法
  20. 从浏览器跳转到前端框架的路由实现

热门文章

  1. 免费Windows系统服务器,免费试用人数太多，Windows 365云电脑服务器炸了，官方紧急暂停...
  2. 分解原理_基于矩阵分解原理的推荐系统
  3. c#退出窗口跳转_关于winform如何如在关闭一个窗口时打开另外一个窗口
  4. java socket超时时间_java中socket 默认超时时间 | 学步园
  5. 复数乘法_leetcode No.537 复数乘法
  6. c语言class运行错误,win32 C RegisterClass失败,该如何处理
  7. sklearn中分类器的比较
  8. 基于TLD2331完成动态LED显示驱动
  9. 测试稳压二极管特性：BZT52C4V7
  10. 第十六届全国大学生智能汽车竞赛 英飞凌芯片申请情况