display:none；导致transition不起作用

最新推荐文章于 2022-09-05 20:30:26 发布
最新推荐文章于 2022-09-05 20:30:26 发布
阅读量916 收藏
点赞数
文章标签： web javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c46550/article/details/115534851
版权

transition与display搭配使用时，会导致过渡消失，初步猜测是因为“定位树”中不会有display:none的元素，而transition的计算依赖“定位树”
解决方案：
使用定时器，在下一次事件轮询设置display

setTimeout(() => {
          xxx.style.display="none";
},0)
c46550
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display:none无transition动画过渡；height:auto的transition动画;
u010267996的博客
03-14 1万+
想实现类似bootstrap中collapse的功能。设置过渡动画的时候发现下面两个问题。     一、使用display:none和display:block是不会有transition动画效果的。      目前display属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)。而display是一个尴尬的属性，该计算什么值实现？
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1763
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
transition设置display过渡无效
友人C君的博客
04-16 9063
使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。 原因 display:none的时候，页面文档流中将不会存在该元素，display:block...
transition 动画与 display: none 冲突的问题
mango660的博客
05-06 847
几种元素消失的属性 display: none; 元素消失,不占位。 visibility: hidden; 元素消失,占位。 opacity: 0;透明度设为0,元素看不见,占位。 width: 0;宽度设为0 ,元素看不见,不占位。 问题 transition与display搭配使用时，会导致过渡消失，直接呈现或者消失元素 可能是transition过渡不支持display的改变，直接...
CSS技巧篇(一)：transition与display冲突问题
madman0621的博客
09-05 6858
问题 使用transition对div的隐藏与显示进行过渡，但是transition完全失效，没有过渡效果。 See the Pen VGWKWm by madman0621 (@madman0621) on CodePen. div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transiti...
收起/展开效果，display和transition不能一同使用
ethan的博客
09-02 507
transition对display:none;无效
bootstrap 4的关于collapse 折叠失效 解决办法
chencai56的博客
07-16 7157
bootstrap 4的关于collapse 折叠失效，自己找原因半天，发现是因为引用的jquery版本太低，用较高版本的jquery.js，此功能便会成功，不会失效了。 大家可以尝试使用更高版本的jquery. 折叠效果恢复 ...
v-show和v-if的区别 display:none和visible: hidden的区别
qq_43944285的博客
05-09 1247
星空旅行者曦橙紫皮 2:53:23 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素 星空旅行者曦橙紫皮 2:53:42 display:none是不为隐藏的对象保留其物理空间，俗称看不见也摸不着； visible: hidden是为隐藏的对象保留其物理空间的，俗称看不见但摸得着。 ...
display:none、visibility:hidden与opacity:0直间到底什么区别（笔试题）
m0_60622481的博客
04-18 276
1、空间占据方面 display:none隐藏后不会占据原有空间，会产生回流和重绘 visibility:hidden和opacity:0元素隐藏，但仍然占据着原有空间，它们俩只会引起页面重绘。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.
display与transition动画冲突问题
lemossrkilakila
05-04 789
display与transition动画冲突 延时 timeout requestAnimationFrame 替代 absolute visibility opacity keyframe
element collapse-transition 无法捕捉动画结束
weixin_36878452的博客
09-24 970
import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-transition'); if (!el.dataset) el.dataset = {}; el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.ol.
display中的transition实现
热门推荐
尘埃丶落定的博客
07-25 1万+
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...
css中动画和display踩过的坑
qq_43427385的博客
09-18 1724
动画的过渡效果一遇到display就没有效果，是因为： display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。 所以display做不了过渡效果，但是可以有其他的办法做过渡效果 解决办法: 1，依然用display，但是在js中加setTimeout延迟一下 2，用opac...
display设置显示隐藏，transition过渡不起效果，采用opacity+visibility+dispaly解决问题
韩旭的博客
05-10 7905
文章目录一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。二、直接采用display:none;display:block;过渡transition不起效果。三、解决方案3.1 visibility与opacity二者区别？3.2 如何不让其占据页面位置？ 一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。 当我们点击按钮123时，对应的下方弹出层展示在页面上，再次点击或点击文档其他处时，我们需要将弹出层隐藏（带有动画效果）。 二、直接采用display:none;display:block;过渡
过渡属性transition详解
dwjdj的博客
01-28 9223
一般transition属性设置在默认状态中。 ☞ 过渡属于一种特殊的动画 ☞ 通过一种状态向另外一种状态的改变 transition-property属性： 用于指定过渡效果的CSS属性的名称，其过渡效果通常在用户将鼠标移动到元素上时发生 transition:none|(没有属性会获得过渡效果) all|(所有属性获得过渡效果) property(过...
transition过度
qwguo
01-05 999
transition过度属性 transition：用于设置DOM元素在不同状态之间切换的时候应用不同的过度效果，以前如果要想实现一个非生硬的状态切换需要写很多的js来实现，现在使用transition变可以轻松的实现。 1、transition-property： property：表示属性的意思，这里用来设置元素要过度的css属性名。 基本语法： transition: none | ...
display和transition过渡冲突 元素移动显现消失的解决方案
Noctis99的博客
09-05 1296
v
transition动画过渡没作用（无效）
weixin_45689946的博客
10-27 1万+
transition无效的原因 1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。 css .header { position: relative; width: 200px; height: 50px; background: red; transition: all 0.3s ease-in-out; } .showMenu.layui-layout-admin .header{ left:-200px; } js $(".moveHandle").click(functio
图表由display:none变为可见状态的那一刻，什么方法可以坚挺到
最新发布
03-25
图表由display:none变为可见状态的那一刻可以使用transition（过渡）方法进行监听。具体实现可以通过CSS3的transition属性来实现，代码如下： HTML： <div class="chart"></div> CSS： .chart{ display: none; transition: all 0.5s ease-in-out; } .chart.show{ display: block; } JavaScript： const chart = document.querySelector('.chart'); chart.classList.add('show'); chart.addEventListener('transitionend', () =>{ // 监听过渡完成后执行的代码 console.log('Chart is shown'); }); 在这个例子中，我们首先定义了一个样式为display:none的.chart元素，然后通过添加.show类来将其显示。同时，我们为.chart元素添加了transition属性，过渡时间为0.5秒，并定义了过渡的缓动函数为ease-in-out。最后，通过JavaScript监听transitionend事件，当过渡完成后显示“Chart is shown”这样的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值