CSS transition delay简介与进阶应用

最新推荐文章于 2022-12-01 15:04:59 发布

黄Java

最新推荐文章于 2022-12-01 15:04:59 发布

阅读量515

点赞数

分类专栏：黄Java的地盘文章标签： css javascript

本文链接：https://blog.csdn.net/weixin_42899690/article/details/120563613

版权

背景

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

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

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

实现方案

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-d

最低0.47元/天解锁文章

黄Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS transition delay简介与进阶应用

背景在日常的项目开发中，我们会很经常的遇见如下的需求：在浏览器页面中，当鼠标移动到某个部分后，另一个部分在延迟若干时间后出现在鼠标移除该区域后，另一部分也在延迟若干时间后消失我相信这是一个很常见的一个需求，有很多种方式能够实现，但是，其实现方式的原理各不相同，也有利有弊。实现方案CSS在CSS中，有一个伪类hover也能够监听鼠标移动到某个元素上面，因此我们也可以利用CSS来实现我们刚刚的功能。我们需要使用的是CSS3中的新特性：transition。tra
复制链接

扫一扫