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
或者用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
打开浏览器看一下效果先。 我擦。。。。淡入淡出的效果全没了
怎么回事。。。这简直是破坏性的作用，这也是之前做动画过程中遇到的大坑
聪明的码农们当然有办法来解决这种情况。 大家都知道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
浏览一下，会发现，这时候是会有延时隐藏的效果的。很好，又发现新东西了
那渐变的效果怎么办。。。。
聪明的码农们又想起了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
浏览下先。。。。！！！！一切正常了
其实，visibility会在opacity生效后再应用。比如隐藏时，先opacity变为0，再应用了visibility:hidden 这时候就隐藏起来了，相关的事件也不会发生。 看来display:none这时候被抛弃了啊
当然，有人会说visibility:hidden始终是占着页面空间的，display能够减少页面的repaint，还是要用display:none怎么做呢
聪明的码农又想到了： 先把display变成block 然后延迟transition动画的执行
当然啦 这就需要用到JS了
以上就是display和transition中发现的坑。。。。！
css3中transition和display的坑的更多相关文章
- 关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
- css3中transition和animation的回调处理
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬＿┬)看来还是要再接再励啊w(ﾟДﾟ)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...
- css3中什么时候用transition什么时候用animation实现动画
在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 中的transition和transform
我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
随机推荐
- 织梦cms更新新建的栏目提示：DedeTag Engine Create File False:C:/phpStudy/WWW/
这个问题怎么解决呢?只是更换了一下栏目名称.增加了新的栏目,结果就不行了. 问题原因: 新建的栏目没有"列表命名规则",导致cms解析的时候,出现解析错误. 解决办法 在下图填入: ...
- log4j使用--http://www.cnblogs.com/eflylab/archive/2007/01/11/618001.html
package log4jTest.com; import java.io.FileReader; import org.apache.log4j.BasicConfigurator; import ...
- Java：单例模式的七种写法
第一种(懒汉,线程不安全): 1 public class Singleton { 2 private static Singleton instance; 3 private Singleton ( ...
- ASCII字符集中的功能/控制字符
ASCII字符集中的功能/控制字符 Function/Control Code/Character in ASCII Version: 2011-02-15 Author: gree ...
- web前端笔试选择题
1. 要动态改变层中内容可以使用的方法有(AB ) a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 当按键盘A时, ...
- 纯CCS绘制三角形箭头图案
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...
- DIV+CSS自适应布局
自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应 1,高度自适应 ...
- Android Activity task 相关属性
所谓的 task ,是指用户完成某一项任务时与之交互的一组 Activity.比如用户要向开发者汇报 bug,先打开程序主页,然后打开关于页面,再点击报告 bug 按钮,打开编辑邮件页面.当前这三个 ...
- <十>JDBC_处理Blob类型数据
/* * 读取BLOB数据: * 使用getBlob方法读取到Blob对象 * 调用Blob的getBinaryStream(方法得到输入流,在使用IO操作 * */ @Test publ ...
- Python之路第一课Day6--随堂笔记(面向对象 )
本节内容: 1. 面向对象编程介绍 2. 为什么要用面向对象进行开发? 3. 面向对象的特性:封装.继承.多态 4. 类.方法 一.面向过程 VS 面向对象 1. 编程范式 编程是 程序 员 用 ...