这篇文章发布于 2013年05月14日，星期二，20:53，归类于 CSS相关。 阅读 104787 次, 今日 12 次 24 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3305
一、transition与visibility
这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值，会发现竟然有一个visibility.
此时，我的脑袋上立马冒出了3个大大的问号：visibility不就visibile/hidden/collapse等值，又不是数值什么的，怎么有动画效果呢？？
一番查阅研究，发现，这玩意还是有些作料的……
二、transition与visibility
天气燥热，身边有没有冰镇的西瓜，因此，不卖关子。
术语解释是：
visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”
我的解释是：
visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1. 于是，visibility应用transition等同于0~1之间的过渡效果。
实际上，只要visibility的值大于0就是显示的。由于这个现象，我们可以利用transition实现元素的自动延时隐藏。如果您是IE10+以及其他现代浏览器，鼠标经过下面的链接，就会看到效果：
或者您也可以狠狠地点击这里：transition/visibility与延时隐藏demo
CSS以及HTML代码如下：
.trans{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.image{position:absolute; margin-top:20px; visibility:hidden;}
.hover:hover .image{visibility:visible;}
<div class="hover">
<img loading="lazy" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="trans image" />
<a href="#">经过我显示图片</a>
</div>
这为我们实现非嵌套多级菜单以及其他一些需要延时隐藏交互效果提供了新的灵感——CSS控制，而非JS中的setTimeout定时器。
三、transition与visibility
有人可能会问，既然有延时隐藏，那有没有延时显示呢？这个自然有，transition中有个属性叫做transition-delay就是做延时的，于是，就有下面这个效果：
CSS以及HTML代码如下：
.trans-delay{
-webkit-transition:visibility 0s linear;
-moz-transition:visibility 0s linear;
-o-transition:visibility 0s linear;
-ms-transition:visibility 0s linear;
transition:visibility 0s linear;
}
.image-delay{position:absolute; margin-top:20px; visibility:hidden;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-ms-transition-delay:0s;
-o-transition-delay:0s;
transition-delay:0s;
}
.hover-delay:hover .image-delay{
visibility:visible;
-webkit-transition-delay:0.5s;
-moz-transition-delay:0.5s;
-ms-transition-delay:0.5s;
-o-transition-delay:0.5s;
transition-delay:0.5s;
}
<div class="hover-delay">
<img loading="lazy" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="trans-delay image-delay" />
<a href="#">经过我显示图片</a>
</div>
如果您在RSS中阅读本文而没有效果，您也可以狠狠地点击这里：transition/visibility与延时显示demo
四、transition与visibility
现象已知，原因何在？visibility也能transition的意义何在？
答曰：动画结束时候能够自动隐藏。
嘛意思？
举个例子，我们要实现淡入淡出效果，显然是需要改变透明度的，但是，元素即使透明度变成0，虽然肉眼看不见，但是，在页面上，元素还是可以点击，还是可以覆盖其他元素的，这显然是有问题的，我们最最希望的是在元素淡出动画结束后，元素可以自动隐藏！visibility的响应就是为这个需求而生的！
还是鼠标经过显示图片：
CSS以及HTML代码如下：
.trans-fadeout{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
.image-fadeout{position:absolute; margin-top:20px; visibility:hidden; opacity:0;}
.hover-fadeout:hover .image-fadeout{ visibility:visible; opacity:1; }
<div class="hover-fadeout">
<img loading="lazy" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="trans-fadeout image-fadeout" />
<a href="#">经过我显示图片</a>
</div>
如果您当前使用的浏览器还算有脸面，应该可以看到，图片透明度慢慢降低成0后，图片就立即自动应用了visibility:hidden, 实现了配合天衣无缝的隐藏，cool! 
如果是外站访问本文，CSS效果应该木有，您可以狠狠地点击这里：transition与visibility与淡入淡出效果demo
不仅是淡入淡出效果，诸如缩小隐藏或slide隐藏效果的时候，元素也可以自动完美隐藏。
那display:none呢?
根据测试，display:none无法应用transition效果，甚至是破坏作用。唉，display:none看来是被嫌弃了。
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3305
（本篇完）
- 小tip: 微博新版查看大图前后浏览的另外一种实现 (0.353)
- CSS 相对/绝对(relative/absolute)定位系列（三） (0.310)
- URL锚点HTML定位技术机制、应用与问题 (0.253)
- CSS transition-behavior让display none也有动画效果 (0.239)
- css行高line-height的一些深入理解及应用 (0.226)
- jQuery - 鼠标经过(hover)事件的延时处理 (0.226)
- letter-spacing+first-letter实现按钮文字隐藏 (0.226)
- jQuery-innerfade内部列表自动淡入淡出插件 (0.169)
- CSS3背景图片透明叠加属性cross-fade简介 (0.169)
- 您可能不知道的CSS元素隐藏“失效”以其妙用 (0.127)
- 页面级可视动画View Transitions API初体验 (RANDOM - 0.027)
我的应用
我的应用
牛牛牛！用在毕设前端里了?
很实用，用上了，感谢博主
visibility是很好用，最近在项目里用到，但发现在ios手机里不兼容，可惜
嗯？我怎么没遇到过~
常来贵站走走真是每次都有收获啊。
这个visibility过渡技巧解了我燃眉之急心头之恨啊，不过说回来之前一直以为visibility:hidden与opacity:0相同。
有个区别就是visibility:hidden的元素不可点击，但是opacity：0的元素只是透明了，依然可以捕获点击事件
用display:none可以减少页面的repaint，不过用display就必须依赖js了
赞~原来是这样哈~给博主顶一个！多多加油~！
有一个疑问呢，在第一个例子中既然是在visible变化的时候延迟，为什么在显示的时候没有延迟，而在隐藏时有呢？
谔谔 不要理我。。。眼花了，果然七天连续看电脑是会致残的。。。
博主说“display:none无法应用transition效果，甚至是破坏作用‘，其实有的时候我们不得不适用display:none+transition实现以下动画
解决方法可能是：
先把ele的display改成block，
然后用setTimeout推迟几毫秒之后进行transition动画
不知道这个方案有什么漏洞吗
不过话说，这个left，right这种玩意，可以用transform:translate代替，就是不知道为啥opacity的过渡，加上left和visibility以后，会显得很突兀。
当加入了left的变化，并且把图片变成纯文字， opacity没有中间的过渡了。
css:
.image-fadeout{position:absolute;top:0; margin-top:20px; visibility:hidden; opacity:0;}
.hover-fadeout:hover .image-fadeout{top:20px; visibility:visible; opacity:1; }
html:
能正常淡入淡出：
或者，也能正常淡入淡出：
百变大咖秀
第一次正常，以后就是0,1的变化了，没有淡入淡出的过渡：
百变大咖秀
鑫哥，求指导~
<div class="hover-fadeout">
<p class="trans-fadeout image-fadeout"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"/></p>
<a href="#">纯图片</a>
</div>
<div class="hover-fadeout">
<p class="trans-fadeout image-fadeout"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"/>百变大咖秀</p>
<a href="#">图文混排</a>
</div>
<div class="hover-fadeout">
<p class="trans-fadeout image-fadeout">百变大咖秀</p>
<a href="#">纯文字</a>
</div>
第“三”部分的示例代码中，.image-delay中的transition-delay部分貌似可以不要，因为.trans-delay中已经设置了transition-delay为缺省值0
学习了，博主观察入微呀！
哈哈 笑死我了。张含韵上百变大咖秀了，哈哈。我也看了百变，模范梅艳芳，结果张含韵又被沈凌模仿了。呵呵。
有点前端的味道，互相模仿啊
其实我也是来告诉鑫哥 张含韵上百变大咖秀了-.-！
@许胜斌 如果你只用透明度的话，那下面的元素将会被遮住，如果你用了visibility就不会挡住下面的元素，下面的元素仍然可以操作~！
visibility有啥用呢？不要此属性，仅仅opacity也可以实现同样的效果吧
@许胜斌 opacity化的元素依然可以点击触发事件，hover效果等~
true
涨姿势！
其实我是来告诉鑫哥 张含韵上百变大咖秀了-.-！