阅读 358

CSS transition delay简介与进阶应用

背景

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

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

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

实现方案

CSS

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

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

transition是一个简写属性,可设置transition-property, transition-duration, transition-timing-function, transition-delaytransition用来定义元素两种状态之间的过渡。不同状态可以用 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复杂度,是一个比较优的解决方案。

参考

说明

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

关注下面的标签,发现更多相似文章
评论