CSS transition delay简介与进阶应用

黄Java

发布于 2018-09-18 17:09:35

2K0

发布于 2018-09-18 17:09:35

文章被收录于专栏：黄Java的地盘黄Java的地盘黄Java的地盘

背景

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

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

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

实现方案

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立马就消失了。让我们来分析一下鼠标移入和移出时的效果。

当鼠标移入时：

鼠标移入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);
});

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