当transition遇上display

本文探讨了CSS3 transition属性在遇到display属性时的问题,并提出了三种解决方案,包括使用visibility替代display,分离opacity并结合JS实现过渡效果,以及使用requestAnimationFrame优化动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

相信大家在试用css3动画时候一定用过transition属性,相对于js动画来说用起来更快速简单。
代码如下:
HTML结构:

CSS代码:

JS代码

在点击按钮后可以看到淡入淡出的动画效果,但是在css代码中解除对于display属性的两段注释以后,再打开浏览器一看,淡入淡出的效果全没了。
这简直是破坏性的作用,然后我度娘了一下总结了几个方法。

第一种方法:将display用visibility来替代,大家都知道visibility的效果其实跟display在一定程度上相似,那为什么说只是一定程度上相似呢,因为它仍然是占空间的,那你一定会说,这么用跟opacity没啥区别呀。但却可以避免遮挡下面的层比如按钮的点击事件。

第二种方法是相对于第一种方法的进阶,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity分离出来

CSS代码:

js代码

第三种方法与第二种方法类似,用requestAnimationFrame来取代setTimeout,相应的修改了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

js代码如下

以上就是当transition遇上display时碰到的坑。

原文出处: 携程设计委员会   

课程名称:Web前端技术 开课单位:电子与信息工程学院 考核班级:计科专升本241、242班 、物联专升本241、242班 任课教师:覃月星 一、总体要求 用Hbuilder等开发工具制作一个由静态网页构成的网站,包括1个首页、至少2个子页面,可参照各大网站的布局样式。 (例如:京东、淘宝、天猫、腾讯、新浪新闻……) 二、功能要求 1、首页必须包括网站头部(包括logo )、导航条(带有鼠标移入事件变化效果)、主要内容(如:轮播图。可选,可用其他内容代替)、选项卡效果、图片、文字、网站尾部等主要信息展示。 2、子网页相关栏目按照实际项目需求设置(按功能和页面美观度评分) 如: 新闻类网站子网页就设置成新闻的文字展现页面 视频类网站子网页就设置成视频的多媒体展现页面 商城类网站子网页就设置成商品的表格信息展现页面 …… 3、各页面需要a超链接标签来相互跳转。 三、评分点说明 总分:100分 1、首页30分,其中网站头部5分,导航条5分,主要内容5分,选项卡5分,网站尾部5分,样式排版美观程度5分。 2、子页面30分,项目相关性25分,样式排版美观程度5分。 3、其他项20分,代码排版规范性3分,部分代码进行必要注释4分,项目文件夹规范性3分,超链接连接各个页面10分。 4、录音10分,主要对自己的网站设计进行讲解,如设计思路、制作的过程等如何实现,说明点哪里跳转、功能细节等问题,可以重点介绍网站中的亮点部分即做得比较好的地方,以“网站设计讲解.mp3”保存(MP3版本)。参考一些大网站写一个关于茶文化的网站首页
最新发布
06-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值