css中动画和display踩过的坑

最新推荐文章于 2022-05-26 10:04:54 发布
最新推荐文章于 2022-05-26 10:04:54 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： web前端 文章标签： transition过渡效果的坑 display和transition
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43427385/article/details/100976399
版权

动画的过渡效果一遇到display就没有效果，是因为：
display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

所以display做不了过渡效果，但是可以有其他的办法做过渡效果

解决办法:

1，依然用display，但是在js中加setTimeout延迟一下
2，用opactiy，0和1是有过渡效果的
3，用visibility,visible就相当于1，hidden相当于0

佛系孤单
关注
专栏目录
css中visiblity和display异同详解
12-13
在CSS（层叠样式表）中，`visibility` 和 `display` 属性是两种不同的机制，用于控制元素在页面上的可见性和布局。虽然它们都可以使元素变得不可见，但它们在处理元素空间占用方面有着显著的差异。 1. **`...
css中display和visibility的用法和区别介绍
09-25
在CSS中，`display`和`visibility`是两个非常重要的属性，它们用于控制元素在页面上的呈现方式和可见性。虽然两者都与元素的可见状态有关，但它们的作用机制和效果有所不同。 **`display`属性** `display`属性主要...
transition设置display过渡无效
友人C君的博客
04-16 9099
使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。 原因 display:none的时候，页面文档流中将不会存在该元素，display:block...
CSS技巧篇(一)：transition与display冲突问题
madman0621的博客
09-05 6884
问题 使用transition对div的隐藏与显示进行过渡，但是transition完全失效，没有过渡效果。 See the Pen VGWKWm by madman0621 (@madman0621) on CodePen. div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transiti...
CSS3动画（transition，transform）和元素的隐藏显示display
wangshang1320的博客
12-26 1万+
工作中经常会写一些简单的显示隐藏功能，可以适当加个动画 transition（过度动画，从某某某属性到某某某属性） 语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration ...
CSS3动画下拉菜单（当transition遇到display的坑）
touchingt的博客
09-21 1万+
下拉菜单是页面中很常见的一个元素，但是和标签的默认外观实在不怎么好看，而且它们还很难通过CSS来修改成合意的样式，对hover效果的支持也不好，因此往往会使用或是、这些标签来模拟出下拉菜单的效果。 使用CSS3的transition，能够简单地实现下拉菜单的效果。 也在研究过程中发现，transition是不支持display属性的，可谓一个坑。
display中的transition实现
热门推荐
尘埃丶落定的博客
07-25 1万+
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...
CSS3鼠标滑过导航出现下划线动画特效
06-05
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是通过鼠标滑过导航菜单时实现动态的下划线动画效果。这款"CSS3鼠标滑过导航出现下划线动画特效"是利用CSS3的特性，如伪...
用html和css制作师徒四人西天取经动画（提供源码+素材）
最新发布
11-01
这个项目不仅涵盖了基础的HTML布局和CSS样式设置，还涉及到CSS动画和过渡效果，使得网页元素能够按照预设路径动起来，为用户提供更为生动的视觉体验。 首先，HTML（HyperText Markup Language）是网页的基础结构...
失去光标display=none事件的坑
weixin_30664615的博客
06-06 226
1.实现效果： 失去光标进行判断，如果内容为空出现提示。 2.页面代码： <tr class="tableform_tr"> <td width="150px" class="alignright"> <div><span>公司名...
css处理transition 碰上display会无过度动画
一颗松鼠
05-26 439
css处理transition 碰上display会无过度动画 相信各位老铁在实现元素隐藏到显示的过度动画时，都遇到过此问题，在此记录一个解决方法，方便自己日后使用 处理过度动画无效当然可以用js写，但是感觉用js写第一是没有直接用css3方便又节省性能，第二是时间变量不好统一管理，例如初始动画时间为2s，后面项目需要动画过度时间改成0.2s，还得过去找js更改时间，很麻烦。 /*需要opacity:0和visibility:hidden实现隐藏元素*/ #bg{ /*隐藏状态下*/
css transition过渡 与 display 冲突问题
TheobaldWong的博客
12-29 1046
问题描述： 当改变元素display属性时，过渡transition将会失效，原因是display 为none时，页面doc流中不会存在该元素，而transition无法在doc流中做到无中生有，transition改变的只是前后两个状态。 解决办法： 1. 使用 width 或者 height 属性 2. 可用 visibility 属性 3. 使用opacity 属性 ...
css中隐藏后显示过渡设置-transition属性与display属性冲突问题-解决案例
JackieDYH的博客
04-20 4440
由来 div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。 display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。 解决 使用 visibility 或者 opacity 替代 display visibility:hidden的时候元素任然存在于.
当transition遇上display
lechen1013的博客
07-11 565
相信大家在试用css3动画时候一定用过transition属性，相对于js动画来说用起来更快速简单。 代码如下： HTML结构： XHTML 12id="box">动画按钮CSS代码：CSS 1 2 3 4 5 6 7
transition不支持display属性
csdn_zsdf的博客
05-31 1万+
想让display从none变为block，或者从block变为none时，实现这样的动画效果大多数人都会采用transition。然而可惜的是transition并不支持display。那么能想到的办法就是使用visibility属性实现从 visible到hidden的转换。但是visibility属性与display的区别 display隐藏的元素是脱离文档流的，它不在页面中占用空间。而vi
[css] CSS3中的transition是否可以过渡opacity和display？
歌谣的博客
02-17 2224
[css] CSS3中的transition是否可以过渡opacity和display？ transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后，每一帧都会执行以下操作: js执行 2.style加持 3.layout 4.paint 5.composite 在js执行过程中， 遇到DOM操作，并不会立即渲染，而是推入到队列中，等待UI Render的执行一次性渲染，这是浏览器的优化手段 接下来是重点： 在获取DOM的布局信息时，会
面试官:css中display属性和transition属性冲突 如何解决?
weixin_43321726的博客
02-16 822
面试官:我想要设置过渡属性 ， 但是我使用了display：none;导致该效果无法生效,该如何解决? 张三:display:none的时候,元素从页面文档中消失了，display:block才会显示。transition无法对一个时有时无的元素进行过渡效果。可以用visibility或者opacity替代display .box { width: 100px; height: 100px; background-color: yellow; // display: none; opac
css中display:none变为block无法触发transition的解决办法
weixin_43623808的博客
09-16 2586
问题 在页面开发过程中使用transition过渡是一个非常方便并能提高用户体验的属性，不会让一些元素的变化显得非常的突兀，但是元素从display:none到display:block是无法触发过渡（transition）属性的，如果说使用js来解决这个问题会添加复杂的鼠标移入移出监听事件 解决办法 最简便的方式还是使用css3解决，这样也使得js的逻辑代码更纯粹 以下代码的逻辑是：鼠标悬浮父元素触发hover之后给子元素div添加一个动画 需要注意的是这个方法只能解决父子关系的元素 <head&g
css display none 动画
08-17
要实现CSS的display:none动画效果，可以使用CSS过渡和一些技巧。一种方法是使用transition属性和opacity属性来实现淡入淡出的效果。首先，通过给元素设置一个初始的透明度为0，并使用display:none隐藏元素。然后，通过将display属性设置为block或其他合适的值，逐渐增加透明度来显示元素。可以使用transition属性来实现透明度的渐变效果。最后，在透明度达到1时，将display属性设置回none来隐藏元素。这样就可以实现CSS的display:none动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [css3 中dispaly:none 动画处理](https://blog.csdn.net/qq_21586623/article/details/78834640)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [CSS小技巧---display显隐动画效果](https://blog.csdn.net/hncu1990/article/details/118829509)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值