小tip: transition与visibility

这篇文章发布于 2013年05月14日,星期二,20:53,归类于 CSS相关。 阅读 100934 次, 今日 1 次 23 条评论

 

一、transition与visibility

这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值,会发现竟然有一个visibility.

transition与visibility

此时,我的脑袋上立马冒出了3个大大的问号:visibility不就visibile/hidden/collapse等值,又不是数值什么的,怎么有动画效果呢??

疑问

一番查阅研究,发现,这玩意还是有些作料的……

二、transition与visibility

天气燥热,身边有没有冰镇的西瓜,因此,不卖关子。

术语解释是:

visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”

我的解释是:
visibility:hidden可以看成visibility:0visibility: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

图片淡出与visibility隐藏

不仅是淡入淡出效果,诸如缩小隐藏或slide隐藏效果的时候,元素也可以自动完美隐藏。

那display:none呢?
根据测试,display:none无法应用transition效果,甚至是破坏作用。唉,display:none看来是被嫌弃了。

(本篇完)

分享到:


发表评论(目前23 条评论)

  1. wu说道:

    很实用,用上了,感谢博主

  2. 果断的油纸伞说道:

    visibility是很好用,最近在项目里用到,但发现在ios手机里不兼容,可惜

  3. 周发财说道:

    常来贵站走走真是每次都有收获啊。
    这个visibility过渡技巧解了我燃眉之急心头之恨啊,不过说回来之前一直以为visibility:hidden与opacity:0相同。

    • 一只菜鸡说道:

      有个区别就是visibility:hidden的元素不可点击,但是opacity:0的元素只是透明了,依然可以捕获点击事件

  4. dYb说道:

    用display:none可以减少页面的repaint,不过用display就必须依赖js了

  5. Sivory说道:

    赞~原来是这样哈~给博主顶一个!多多加油~!

  6. weiba112027说道:

    有一个疑问呢,在第一个例子中既然是在visible变化的时候延迟,为什么在显示的时候没有延迟,而在隐藏时有呢?

  7. sprtree说道:

    博主说“display:none无法应用transition效果,甚至是破坏作用‘,其实有的时候我们不得不适用display:none+transition实现以下动画
    解决方法可能是:
    先把ele的display改成block,
    然后用setTimeout推迟几毫秒之后进行transition动画
    不知道这个方案有什么漏洞吗

  8. kumo贝尔说道:

    不过话说,这个left,right这种玩意,可以用transform:translate代替,就是不知道为啥opacity的过渡,加上left和visibility以后,会显得很突兀。

  9. kumo贝尔说道:

    当加入了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的变化了,没有淡入淡出的过渡:
    百变大咖秀

    鑫哥,求指导~

  10. wyljkz说道:

    第“三”部分的示例代码中,.image-delay中的transition-delay部分貌似可以不要,因为.trans-delay中已经设置了transition-delay为缺省值0

  11. @陶子吃鱼儿说道:

    学习了,博主观察入微呀!

  12. yetazhan说道:

    哈哈 笑死我了。张含韵上百变大咖秀了,哈哈。我也看了百变,模范梅艳芳,结果张含韵又被沈凌模仿了。呵呵。

    有点前端的味道,互相模仿啊

  13. weiwei小盆友说道:

    其实我也是来告诉鑫哥 张含韵上百变大咖秀了-.-!

  14. reyhappen说道:

    @许胜斌 如果你只用透明度的话,那下面的元素将会被遮住,如果你用了visibility就不会挡住下面的元素,下面的元素仍然可以操作~!

  15. 许胜斌说道:

    visibility有啥用呢?不要此属性,仅仅opacity也可以实现同样的效果吧

  16. young说道:

    涨姿势!

  17. 小A说道:

    其实我是来告诉鑫哥 张含韵上百变大咖秀了-.-!