CSS transition delay简介与进阶应用

时间 2019-11-24

标签 css transition delay 简介进阶应用栏目 CSS 繁體版

原文原文链接

背景

在平常的项目开发中，咱们会很常常的碰见以下的需求：javascript

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

我相信这是一个很常见的一个需求，有不少种方式可以实现，可是，其实现方式的原理各不相同，也有利有弊。css

实现方案

CSS

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

咱们须要使用的是CSS3中的新特性：transition。java

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

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

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

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

如今，让咱们用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，咱们能够实现延时显示的目的。而且，咱们不须要本身去清除定时器，而由浏览器来判别。ui

在此，咱们为何不用display属性呢，由于在display改变时，transition并不会生效。spa

那咱们为何须要在使用了opacity属性的时候同时使用visibility属性呢。由于opacity属性只是让元素变得透明，而不会让元素消失。若是不加速visibility属性的话，那元素变透明后仍然能够点击，那么会出现一些奇怪的影响。

到目前为止，咱们利用CSS彻底模拟了第一部分咱们使用JavaScript实现的功能，并且看上去更简洁。那么，下面咱们来说一些更加复杂的功能有助于你们理解transition。

Transition进阶

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

在上面的代码中稍加改动，就可以获得咱们须要的效果。

transition: opacity 0.5s linear;
复制代码

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

当鼠标移入时：

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

而当鼠标移出时：

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

根据上面的状况咱们知道，当hover事件结束后，visibility属性立马就变成了hidden了，所以后面的动画效果就没法看到了。

那么若是咱们为visibility属性也加上延时呢，能不可以达到咱们的目标，让咱们来看一下效果。

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

代码改动为如上状况后，咱们会发现，当鼠标移出的时候，可以看到动画效果。可是当鼠标移入时，动画效果消失了，如今再让咱们来分析下为何会出现这个状况。

当时鼠标移入时：

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

当鼠标移出时：

鼠标移出div1元素
hover事件中止触发
transition属性让opacity属性从1变为0
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;
      }
    }
  }
复制代码

那么如今让咱们来分析下为何这么写可以达到咱们须要的效果。

当鼠标移入时：

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

当鼠标移出时：

鼠标移出div1
hover事件中止触发，transition延时恢复到0.5s，所以visibility属性不会立刻触发
transition属性让opacity属性由1变为0
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复杂度，是一个比较优的解决方案。

参考

说明

jsbin是一个在线的编辑器，可以在代码编写完成后立刻看到效果，可是该文中有部分代码在jsbin中出现表现与本地不一致的状况(例如CSS进阶中最后一个代码)，你们能够将代码放到本地验证。因为代码效果时好时坏，猜想可能与jsbin的容器相关。