div从无到有的CSS动画
# div从无到有的CSS动画
最近根据公司的发展,组长说要将我们B端的产品打造一个官网(仅限于静态样式的展示和少量后端的交互),我就一往无前的将项目给接了下来。但是在开发的过程中遇见了一个有意思的现象,将div从无到有设置的动画不能生效,那么今天就给大家来聊一聊这个事。
当我们使用display:none时,是让该元素在文本流中消失;使用display:block/inline-block/inline时,是使元素在文本流中变为块元素/行内块元素/行内元素。按照这个规则,是实现一个元素凭空从无到有的最好搭档,但是使用过之后发现没有卵用。你说这尴不尴尬.........
<!-- 展示当动画遇见display:none转化为display:block时动画不能生效 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a {
width: 300px;
height: 100px;
display: block;
text-decoration: none;
background-color: lightgreen;
}
div {
background-color: rgb(233, 255, 224);
}
.t {
display: none;
}
/* 兄弟元素选择器 */
a:hover + .t {
display: block;
transition: 1s;
}
</style>
</head>
<body>
<a href="">我一个测试超链接</a>
<div class="t">
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</div>
<div>测试div</div>
</body>
</html>
看完上述代码是不是脑子一片空白,没有啥思路,不知道咋搞了。兄弟,不用慌,有我呢(想象此处有抛媚眼照片)。
<!-- 展示当动画遇见display:none转化为display:block时动画不能生效 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a {
width: 300px;
height: 100px;
display: block;
text-decoration: none;
background-color: lightgreen;
}
div {
background-color: rgb(233, 255, 224);
}
.t {
opacity: 0;
}
/* 兄弟元素选择器 */
a:hover + .t {
opacity: 1;
transition: 1s;
}
</style>
</head>
<body>
<a href="">我一个测试超链接</a>
<div class="t">
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</div>
<div>测试div</div>
</body>
</html>
别急兄弟,我知道你看了这段代码肯定想骂娘。不用慌兄弟,我就是给你举一个反例,因为如果使用opacity时元素依然在文档流中存在,并且占据文档流的位置,这也就是页面显示成现在样子的原因。
<!-- 使用opcity与max-height混合使用来完成div从无到有的功能 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a {
width: 300px;
height: 100px;
display: block;
text-decoration: none;
background-color: lightgreen;
}
div {
background-color: rgb(233, 255, 224);
}
.t {
opacity: 0;
max-height: 0;
}
/* 兄弟元素选择器 */
a:hover + .t {
opacity: 1;
transition: 1s;
max-height: 9999px;
}
</style>
</head>
<body>
<a href="">我一个测试超链接</a>
<div class="t">
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</div>
<div>测试div</div>
</body>
</html>
看着这段代码是不是一句“卧槽”不由自主的从嘴里发出,真是年轻人不讲武德,还能这样操作。其实代码的世界有很多混合搭配,常规的书中和技术博客中会给大家讲一些常规的技术,但是有时候解决刁钻的问题就需要用一些不常用的方式。
看到这里是不是觉得就完了,怎么可能。一开始的问题解决了吗?估计你会有疑问在想开始的问题难道没有解决吗?弟弟,你忘了transition不能对display生效的问题了吗。现在开始真正硬核时刻,为什么transition不能对display生效。我们可以将display元素的值理解为布尔类型,非0即1。当display:none时,为0;其余的都为1。而transition是一个过渡属性,在它使用的过程中需要有中间状态,而display无法提供合适的中间状态,这也就是为什么transition与display不能生效的原因。(PS:同理,transition也不能对visibility生效)
谢谢您的观看(敬礼)!