display: none 和display: block之间的切换出现过渡效果失效

最新推荐文章于 2023-12-03 19:15:00 发布
最新推荐文章于 2023-12-03 19:15:00 发布
阅读量2.2k 收藏 4
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/array__/article/details/123985752
版权
博客探讨了为何在CSS中使用`display:none`切换到`display:block`不会产生渐变动画，原因是这会导致DOM节点的重新创建。解决方案是改用`opacity`属性进行透明度变化，以确保动画效果的平滑。此内容对于前端开发者优化用户体验至关重要。

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

原因：display: none是销毁当前dom节点，再次切换为display: block时会再创建节点，此时css选择器会重新赋予上去。所以不存在渐变动画。
解决方法：用opacity（透明度）去替代。

jsPao
关注
display:none无transition动画过渡；height:auto的transition动画;
u010267996的博客
03-14 1万+
想实现类似bootstrap中collapse的功能。设置过渡动画的时候发现下面两个问题。     一、使用display:none和display:block是不会有transition动画效果的。      目前display属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)。而display是一个尴尬的属性，该计算什么值实现？
`visibility: hidden`和`display: none`区别
最新发布
m0_72030584的博客
04-25 683
`visibility: hidden`和`display: none`区别
解决display:none到display:block无法实现过渡效果的问题(转换解决思路)
weixin_41033048的博客
12-23 8315
主要是解决问题的思路要转换一下 一开始我们的解决办法或许是通过transition来实现过渡的，但是对于不存在的元素我们是无法从无到有来过渡的。 所以我们可以通过先让内容显示出来，然后再给他们加入animation的动画来实现。具体办法就是让父容器作为display:none和display:block的显示过程。而里面的内容就相当于一开始就是存在的了，我们再让它从透明度为0到1的显示就可以了。 <div class="hover-on"> <div class=".
display从none变成block使用动画过渡
weixin_43294560的博客
01-03 4588
transition过渡不生效 animation动画生效 代码示例: 去掉.jf-drawer-container-hide类后,帧动画生效 .jf-drawer-container { display: block; position: fixed; z-index: 2000; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; background-color: #ccc; } .
关于HTML中div从display:none到display:block透明度渐增显示的实现
战五渣
09-07 1万+
在编写前端页面的过程中，经常会遇到将鼠标移至链接或li上时显示div的需求。如图： 而在这过程中，为了有更好的用户体验，通常要求弹出的div显示过程是渐进的。此时可以采用以下步骤来实现： （1）在HTML中编写页面代码，并在CSS中设置要弹出的div显示display:none； HTML：
display:none到display:block失效问题及解决办法
海风依旧
10-19 3916
项目开发中display:none到display:block失效问题及解决办法
js修改display，在none和block之间切换不显示问题
渔火江渚上的博客
05-21 1万+
目的：这是我的目的，要实现的效果 点击回复a链接 ，输入框input所在父元素div，显示或隐藏。 input>div>div（这个最外层div，对应着问题一，和问题二无关） 问题一：display属性值修改成功不显示 一个div，初始属性值为：display:none； 通过点击某a链接，调用某js函数，修改其display值为block； 成功！但页面不显示。 *解决：其父元素设置最小高度，使其包含这个div 问题二：dislay属性值...
存在display: flex的情况下如何使用display: none和display: block
06-13
如果想要显示这个子元素，可以使用 `display: block` 或者 `display: inline-block`，这样子元素就会重新出现在 flex 容器中，并且按照 flex 布局排列。需要注意的是，如果子元素设置了 `display: none`，那么它的 ...
CSS diaplay=“grid“未生效与display:block
Nie2014的博客
07-12 1796
1、CSS grid可以通过嵌套生成更灵活的页面布局。 参考博客值得收藏的css grid构建复杂布局的小技巧！中代码示例 <p class="container"> <p class="item">One</p> <p class="item">Two</p> <p class="item">Three</p> <p class="item inner-grid"> <p clas
js中style.display=""无效的解决方法
10-25
`style.display`属性可以接受不同的值来控制元素的显示状态，常见的有`none`（隐藏元素）、`block`（块级显示元素）、`inline`（内联显示元素）等等。 当我们通过JavaScript动态修改`style.display`属性以控制元素...
unipp的display:flex失效
08-13
这是因为display:flex的优先级高于display:none和display:block，使它们的作用失效。如果你希望在使用flex布局时，子元素同时具有display:flex和display:block的效果，可以使用其他方法。一种解决方法是先使用...
css实现 display: none和display: block的切换动画
热门推荐
李二狗的博客
10-19 4万+
话不多说先上代码.index-detail-list .item-contain{ display: none; overflow: hidden; padding: 14px 14px 9px; border: 1px solid #ececec; } .index-detail-list .item-contain.active{ display: bl
css display:none 动画
qq_34345149的博客
12-03 1893
【代码】css display:none 动画。
display none的元素重新展示如何撑开页面_一行代码实现display"过渡动画"原理
weixin_39553904的博客
11-29 446
作者：Peter 谭老师转发链接：https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章，提到如何让display出现过渡动画，却没有仔细介绍原理。为了更好的让想学习的人深入理解于是加班加点写下了这篇“短文”，我想以后还是以短文为主，不然大家看起来太累正式开始初始化界面html>Document...
为什么display:none添加过渡效果没有用
u013526484的博客
10-31 646
过渡效果
表格中tr的display:block在火狐中显示错乱的解决方法
GhostSniper
11-07 309
表格中tr的display:block在火狐中显示错乱的解决方法 按照常理，对于某一单元行需要显示时，使用display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题，然后通FireBug去看了下源码，调试下了，发现是display:block属性搞的鬼。 1、当表格为多列...
css中display:none变为block无法触发transition的解决办法
weixin_43623808的博客
09-16 2681
问题 在页面开发过程中使用transition过渡是一个非常方便并能提高用户体验的属性，不会让一些元素的变化显得非常的突兀，但是元素从display:none到display:block是无法触发过渡（transition）属性的，如果说使用js来解决这个问题会添加复杂的鼠标移入移出监听事件 解决办法 最简便的方式还是使用css3解决，这样也使得js的逻辑代码更纯粹 以下代码的逻辑是：鼠标悬浮父元素触发hover之后给子元素div添加一个动画 需要注意的是这个方法只能解决父子关系的元素 <head&g
CSS3动画与display:none冲突的解决办法
qq_41912128的博客
10-20 2032
最近在做项目，前端用VUE做数据大屏，想用CSS3动画实现淡入淡出效果， 但是发现盒子会伸缩，最后翻阅大神操作，得以解决，记录一下，原文链接：https://www.cnblogs.com/yangzhou33/p/9119596.html 概述 css不能在display:none和display:block之间进行动画，并且也不能在height:0和height:auto之间进行动画。这里我研究了一下在display:none和display:block之间进行动画的解决方案，记录下来供以后开发时参考，
display中的transition实现
尘埃丶落定的博客
07-25 1万+
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值