CSS transition delay简介与进阶应用

e10101 发布于2019-08-30 12:54 / 3104人阅读

摘要：用来定义元素两种状态之间的过渡。到目前为止，我们利用完全模拟了第一部分我们使用实现的功能，而且看上去更简洁。附上利用来实现该方案的代码用于参考。由于代码效果时好时坏，猜测可能与的容器相关。

背景

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

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

在鼠标移除该区域后，另一部分也在延迟若干时间后消失

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

实现方案 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文件



    
    Title
    



    
    




//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来进行延时处理，例如这样：




    
    Title

但是上面这个代码有一个比较严重的问题，就是当鼠标两次移动上去的间隔小于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的容器相关。

服务器托管 idc机房托管 css简介 css与html html与css div与css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115161.html

10分钟入门 CSS3 Animation

摘要：中文译为转换，但我更倾向于称呼它变形大名鼎鼎的变形金刚叫。意为缩放，顾名思义，是用于改变元素的大小。每个时间点对应一个状态，代表一个关键帧。我们可以在可视化的创建我们自己的贝塞尔曲线。简介 Animation可以让你不用依赖javascript或jquery，用纯CSS在网页中轻松实现各种动画效果。兼容性 animation在绝大部分主流浏览器都得到了很好的支持！还在兼容IE9的同...

Elle 2019-08-02 13:57 评论0 收藏0
高级前端进阶（三）

摘要：感谢遗忘的过路人这位博主，发现了高级前端进阶一中的转树形数据的问题。引发的思考引发的思考之前的方法，只要进行一次遍历即可，然而现在发现，之前的方法的前提是数据已经是排好序的。感谢遗忘的过路人这位博主，发现了高级前端进阶（一）中的list转树形数据的问题。当然也是我的疏忽。抱歉！！！一、解决问题复现一下问题将list数据不按id顺序排序，将之打乱// list数据[ { ...

番茄西红柿 2021-11-23 09:51 评论0 收藏2637
css3 动画（三）animation 简介

摘要：默认，只执行一次动画动画名称，该名称为动画关键帧的名称。默认如何理解表示的是关键帧的名称，那么如何定义关键帧呢使用。语法名称关键帧样式或总结其实也并不复杂，其有个子属性。下一篇动画三源码解析通过阅读动画库的源码，来提高对中属性的认识前言上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animati...

itvincent 2019-08-29 16:05 评论0 收藏0
开源跨平台移动项目Ngui【Action动作系统】

摘要：与关键帧动作这是动作系统的核心。而关键帧动作又包含理更加基本的元素关键帧关键帧包含的属性与属性是同名的且与所有视图的属性都是对应关键。为动作执行到达关键帧时触发。 Ngui简介这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架，基于NodeJS/OpenGL，这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目，至此JavaScript成为了真正意义上...

Enlightenment 2019-06-25 11:43 评论0 收藏0
开源跨平台移动项目Ngui【Action动作系统】

摘要：与关键帧动作这是动作系统的核心。而关键帧动作又包含理更加基本的元素关键帧关键帧包含的属性与属性是同名的且与所有视图的属性都是对应关键。为动作执行到达关键帧时触发。 Ngui简介这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架，基于NodeJS/OpenGL，这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目，至此JavaScript成为了真正意义上...

ziwenxie 2019-08-21 17:45 评论0 收藏0