css3中transition和display的坑
不知道大家做css3动画的时候遇到过这种情景没?
用opacity实现淡入淡出的效果。噢!good!一切正常 给个栗子:
<!DOCTYPE html>
<html>
<meta charset="uft-8">
<head>
<style>
.div1{background: red;
}
.div2 {width:100px;height:100px;background:blue;transition:opacity 2s;-moz-transition:opacity 2s; /* Firefox 4 */-webkit-transition:opacity 2s; /* Safari and Chrome */-o-transition:opacity 2s; /* Opera */opacity: 0;
}
.div1:hover .div2 {opacity:1;
}
</style>
</head>
<body> <div class="div1"><p>请移动到红色div上</p><div class="div2"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
代码laycode - v1.1
或者用animation,在keyframe中写也一样。这里就不写出代码了
但是难免我们会遇到这样的需求,也一定会遇到: 我们都知道opacity:0的时候,其实他还是占页面空间的,他会遮挡到他下面的层(不是视觉上)。而且绑定在他上面的一些onclick事件之类的,也同样会发生。 这时候我们想在opacity:0的时候,把他隐藏掉,用display: none。 好,那我们稍微在css中加几句,变成
.div1{background: red;
}
.div2 {width:100px;height:100px;background:blue;transition:opacity 2s;-moz-transition:opacity 2s; /* Firefox 4 */-webkit-transition:opacity 2s; /* Safari and Chrome */-o-transition:opacity 2s; /* Opera */opacity: 0;display: none;
}
.div1:hover .div2 {opacity:1;display:block
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
代码laycode - v1.1
打开浏览器看一下效果先。 我擦。。。。淡入淡出的效果全没了 怎么回事。。。这简直是破坏性的作用,这也是之前做动画过程中遇到的大坑
聪明的码农们当然有办法来解决这种情况。 大家都知道visibility的效果其实跟 display 在一定程度上相似, 当然是一定程度上。 那为什么说只是一定程度上相似呢,因为它仍然是占空间的,那么这时候看官一定会说,这么用跟opacity压根没区别呀
但聪明的码农们一定又想到,这时候,他是不会遮挡到下面的层的,也就是说 他跟opacity这样的存在不同,onclick等事件是不会发生的。
我们来说下visibility, 常用到的是visible和 hidden 两个值。但也可以是数值, 等于0时相当于hidden,而只要大于0时,visibility就为visible。那我们利用这点。
.div1{background: red;
}
.div2 {width:100px;height:100px;background:blue;transition:all 2s;-moz-transition:all 2s; /* Firefox 4 */-webkit-transition:all 2s; /* Safari and Chrome */-o-transition:all 2s; /* Opera */visibility: hidden
}
.div1:hover .div2 {visibility: visible
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
代码laycode - v1.1
浏览一下,会发现,这时候是会有延时隐藏的效果的。很好,又发现新东西了
那渐变的效果怎么办。。。。
聪明的码农们又想起了opacity 。。。结合起来用会怎么用呢
.div1{background: red;
}
.div2 {width:100px;height:100px;background:blue;transition:all 2s;-moz-transition:all 2s; /* Firefox 4 */-webkit-transition:all 2s; /* Safari and Chrome */-o-transition:all 2s; /* Opera */visibility: hidden;opacity: 0
}
.div1:hover .div2 {visibility: visible;opacity: 1
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
代码laycode - v1.1
浏览下先。。。。!!!!一切正常了
其实,visibility会在opacity生效后再应用。比如隐藏时,先opacity变为0,再应用了visibility:hidden 这时候就隐藏起来了,相关的事件也不会发生。 看来display:none这时候被抛弃了啊
当然,有人会说visibility:hidden始终是占着页面空间的,display能够减少页面的repaint,还是要用display:none怎么做呢
聪明的码农又想到了: 先把display变成block 然后延迟transition动画的执行
当然啦 这就需要用到JS了
以上就是display和transition中发现的坑。。。。!
转载于:https://www.cnblogs.com/gyjWEB/p/4833004.html
css3中transition和display的坑相关推荐
- css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
- css3中transition属性详解
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
- html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效?
代码如下面所示,我用 transition-duration 对 display: none/block 属性和 width 属性进行2秒慢动作切换.但是,实际展示的时候,width 变换确实用了2秒 ...
- [css] CSS3中的transition是否可以过渡opacity和display?
[css] CSS3中的transition是否可以过渡opacity和display? transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后,每一帧都会执行以下操作: ...
- 浅谈CSS3中display属性的Flex布局,关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
- html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
- 详解css3中display和visibility的区别
在css3中,display和visibility都具备对元素进行隐藏和显示的功能. display语法 display:none | block /*none表示隐藏 block表示显示*/ vis ...
- css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
最新文章
- 让VirtualBox的虚拟机器在电脑开机时自动启动
- Windows Service
- EOS之记事本智能合约
- 线程里面的yield();方法(让出线程)
- 矢量旋度的散度恒为零
- C# WebApi POST 提交
- Tuxedo中间件调研
- 平行云CEO 李岩:CloudXR ,开启通往元宇宙的通道
- [BZOJ3503][CQOI2014]和谐矩阵
- Perl-列表和数组2
- tinymce上传图片php,图片文件上传
- TikTok与抖音有什么不同?为什么TikTok被称为“海外版抖音”?
- 阿里云视频点播指定清晰度
- Augustus操作指南
- 2022-06-01 postgres的insert语句执行的关键流程
- 中国消费信贷行业市场供需与战略研究报告
- STM32串口烧录BIN文件、字库文件【QT上位机】- Uart_Transfer_BIN_to_EX_FLASH
- register变量
- Fast R-CNN与ROI Pooling
- 计算机毕业设计ssm红旗家具城管理系统29a0m系统+程序+源码+lw+远程部署