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 ...
随机推荐
- javascript获取childNodes详情，删除空节点
chidNodes返回的是node的集合, 每个node都包含有nodeType属性. nodeType取值: 元素节点:1 属性节点:2 文本节点:3 注释节点:8 页面上是由无数个节点组成 ...
- 格式化input输入内容（金额）
项目中要用到格式化金额输入框,要求每三个数字用逗号分割开. 添加一个directive angular.module('myApp.directives', []) .directive('filte ...
- Python 爬虫3——第一个爬虫脚本的创建
在进行真正的爬虫工程创建之前,我们先要明确我们所要操作的对象是什么?完成所有操作之后要获取到的数据或信息是什么? 首先是第一个问题:操作对象,爬虫全称是网络爬虫,顾名思义,它所操作的对象当然就是网页, ...
- 常用的107条Javascript
1. document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >( ...
- [LintCode] Best Time to Buy and Sell Stock 买卖股票的最佳时间
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- <十三>JDBC_dbcp数据库连接池
配置文件:jdbc.properties username=rootpassword=kkdriverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql://1 ...
- 【转】Android Studio-1.2版本设置教程
如果重新安装Android Studio的话要重新配置风格选项啥的,这篇是个很好的教程,原文链接:http://blog.csdn.net/skykingf/article/details/45485 ...
- 工作中那些提高你效率的神器(第一篇)_Everything
引言 无论是工作还是科研,我们都希望工作既快又好,然而大多数时候却迷失在繁杂的重复劳动中,久久无法摆脱繁杂的事情. 你是不是曾有这样一种想法:如果我有哆啦A梦的口袋,只要拿出神奇道具就可解当下棘手的问 ...
- initWithCoder与initWithFrame的区别
1. initWithFrame方法是什么? initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对象,也有initWithFrame方 ...
- SQL Server
1.通过触发器来级联删除: 具体的触发器代码如下: Create TRIGGER [dbo].[DeleteRelatedProducts] ON [dbo].[ProductCategory] A ...