display与transition动画冲突问题

最新推荐文章于 2022-10-19 23:20:46 发布
原创 最新推荐文章于 2022-10-19 23:20:46 发布 · 963 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html #javascript #前端

在前端开发中遇到图片切换时，display属性导致transition动画失效的问题。通过延时、使用visibility属性或绝对定位配合z-index来避免冲突。文章引用了寒月十八和馒头加梨子两位大佬的博客，总结出不同场景下最佳解决方案：若元素需保留空间，使用visibility；若不需保留空间，用绝对定位和visibility；过渡情况则结合timeout和visibility。

文章目录

给图片切换写动画的时候，使用display属性，但是transition动画没有生效。

第一版解决方法

延时，隔离display与transition

实验代码如下：

function slide(flag){
   
   
//切换方法
//获取当前元素
	var s=nowActive+"_pic"
	var ele = document.getElementById(s)
			
//如果过渡的opacity较低，会有明显的白闪效果
	ele.style.opacity="0.8"
		
//延时设置display属性
//也有requestAnimationFrame 	替代 setTimeout
	setTimeout(function(){
   
   
		ele.style.display="none"
	},
最低0.47元/天 解锁文章
CSS动画：transition属性详解--平滑过渡的奥秘
caishuangxi111的博客
03-21 1463
btn {/* 使用自定义三次贝塞尔曲线 */曲线设计原则弹性效果：Y轴超出0-1范围（如-0.5或1.5）阶段强调：陡峭部分表示快速变化，平缓部分表示缓冲在线工具推荐。
JavaScript实现移动端带transition动画的轮播
qq_34220109的博客
03-21 409
## JavaScript原生实现带transition动画的自动+手动轮播 JavaScript实现轮播的方式多种多样，桌面的移动端的实现方式都是大同小异的，具体的核心实现原理不外乎下面几个要点。即： 1. 确定播放方向。一般都是横向轮播，当然不排除纵向的需求可能。当然还有反向播放情况，这个自定义。 2. 对第一张图片的处理。如果当前是第一张了，那么如果继续往前面(就是你播放方向的反向)滑动，那...
transition 动画与 display: none 冲突的问题
天空之上有座城
02-24 7730
几种元素消失的属性 display: none; 元素消失，不占位。 visibility: hidden; 元素消失， 占位。 opacity: 0;透明度设为0， 元素看不见，占位。 width: 0;宽度设为0 ， 元素看不见，不占位。 问题 transition与display搭配使用时，会导致过渡消失，直接呈现或者消失元素，可能是transition过渡不支持display的...
解决transition动画与display冲突的几种方法
weixin_33962621的博客
07-22 598
如demo（如果没有显示，请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/）所示，基本的效果是在点击“Translate”按钮后，蓝色区域透明度变为0，然后隐藏display:none；点击Reset按钮后，首先显示蓝色区域display:block，然后透明度逐渐恢复至1，代码如下： 1 var btn1 = $("#testbtn1"); ...
display:none到display:block失效问题及解决办法
海风依旧
10-19 4151
项目开发中display:none到display:block失效问题及解决办法
震惊！！！一眼就能看懂的transition与display冲突问题！！！！
m0_52009348的博客
07-12 474
transition与display冲突问题 问题：在使用dispaly:none(block)对div的显示隐藏应用于过渡属性上时，但是transition完全失效，没有过渡效果 原因：display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素，transition属性无法对一个从无到有的元素进行过渡显示 解决方法: （1）使用visibility代替display,visibility:hidden的时候元素任然存在于文档流中，同时visibil
display设置显示隐藏，transition过渡不起效果，采用opacity+visibility+dispaly解决问题
韩旭的博客
05-10 9202
文章目录一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。二、直接采用display:none;display:block;过渡transition不起效果。三、解决方案3.1 visibility与opacity二者区别？3.2 如何不让其占据页面位置？ 一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。 当我们点击按钮123时，对应的下方弹出层展示在页面上，再次点击或点击文档其他处时，我们需要将弹出层隐藏（带有动画效果）。 二、直接采用display:none;display:block;过渡
Vue 解决路由过渡动画抖动问题(实例详解)
10-15
在<transition>的类中，对离开路由（fade-leave-to）应用display:none样式，使其在离开时不再占据空间，避免布局冲突，从而解决了抖动问题。除了使用display:none，还可以考虑使用绝对定位来使元素脱离文档流，但这...
css的transition过渡动画侧边栏点击收缩展开用width，选中的背景图片会有不过渡问题
最新发布
05-14
好的，我现在需要解决用户的问题：在使用CSS transition实现侧边栏收缩展开时，背景图片没有过渡动画的问题。用户提到他们之前尝试用width属性，但遇到了问题，现在可能尝试了transform或者其他方法，但背景图片的...
display与transition冲突
koudandan的博客
12-03 241
参考地址：解决transition动画与display冲突的几种方法 - JunpengZ - 博客园 实验成功案例： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>display与transition冲突</title> <meta name="Keywords" content=""&gt..
transition与display冲突的说明及解决办法
weixin_43313076的博客
03-12 1850
transition属性的作用就是用来达到一个过度的效果 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 display 属性表示用来显...
transition不支持display属性
csdn_zsdf的博客
05-31 1万+
想让display从none变为block，或者从block变为none时，实现这样的动画效果大多数人都会采用transition。然而可惜的是transition并不支持display。那么能想到的办法就是使用visibility属性实现从 visible到hidden的转换。但是visibility属性与display的区别 display隐藏的元素是脱离文档流的，它不在页面中占用空间。而vi
transition设置display过渡无效
友人C君的博客
04-16 9308
使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。 原因 display:none的时候，页面文档流中将不会存在该元素，display:block...
(30条消息) display中的transition实现
jiaoqi6132的博客
09-17 1270
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而display这个属性比较尴尬，两种状态，要么显示，要么隐藏，因此无法应用transition效果。 ..
transition过渡动画与display等关系
what to say
07-23 626
对于display: none——>display：block的动画，transition无效。可能因为display属于不占位元素消失。 对于visibility: hidden——>visibility: visible的动画，transition有效。因为visibility: hidden元素消失， 占位。但由于实际占位，hover放在visibility: hidden的元素上也会触发效果，不建议使用。 对于opacity: 0——>opacity: 1的动画，transit
display中的transition实现
热门推荐
尘埃丶落定的博客
07-25 1万+
display中的transition实现 这里讨论的transition，是针对于display:none/block;下的实现或替代性方案。 因为过渡是基于数值和时间来计算的，比如长度、颜色、角度等属性值，是可以在单位时间内变化一定数值，从而达到过渡的动画效果。 像我们常见的opacity/width/height/margin/padding等属性，都是可以应用过渡效果的，然而disp...
收起/展开效果，display和transition不能一同使用
ethan的博客
09-02 658
transition对display:none;无效
transition与display冲突问题
qwguanbin的博客
05-17 236
记录一下，一次vue项目中，写添加购物车小球下落动画的时候，刚好碰到过因为操作display来显示隐藏小球而导致transition动画没效果，后面改用v-if或v-show来实现显示隐藏，动画完美实现。
当transition遇上display
lechen1013的博客
07-11 624
相信大家在试用css3动画时候一定用过transition属性，相对于js动画来说用起来更快速简单。 代码如下： HTML结构： XHTML 12id="box">动画按钮CSS代码：CSS 1 2 3 4 5 6 7
transition过渡为什么浮层出现没有动画效果，浮层消失有动画效果
04-30
<think>好的，用户的问题是关于CSS过渡动画在浮层出现和消失时表现不一致，具体是出现时没有动画效果而消失时有。我需要先理解可能的原因，然后找到解决方案。 首先，根据用户提到的transition动画问题，常见的原因可能是CSS属性的初始状态没有正确设置。transition需要明确的起始和结束状态。比如，浮层出现时可能没有设置初始状态，导致浏览器无法检测到变化，因此没有触发动画。例如，如果浮层通过添加.active类来显示，而初始状态没有定义opacity或visibility，可能直接跳转到最终状态，没有过渡效果。 另外，display属性的切换可能会影响transition。因为display:none和display:block之间的切换是瞬间完成的，无法应用过渡。解决方法可能是使用visibility和opacity的组合来代替display，或者使用setTimeout来延迟display属性的改变，让过渡有时间执行。 还要检查transition属性的应用位置是否正确。如果transition只应用在:hover状态而不是默认状态，那么当鼠标移出时，transition可能不会反向执行。应该确保transition定义在元素的默认样式中，而不是仅在触发状态中。 另外，用户可能没有设置正确的过渡属性或持续时间。例如，可能只对某些属性应用了transition，而其他属性没有，导致部分变化没有动画。需要确认所有需要过渡的属性都被包含在transition中，或者使用all来涵盖所有变化。 还需要考虑浏览器兼容性问题，可能需要添加厂商前缀，如-webkit-transition等，尤其是在旧版浏览器中。不过现代浏览器大多不需要，但用户可能使用了特定环境需要支持。 最后，检查是否有其他CSS覆盖了transition的设置，或者JavaScript代码在切换类时干扰了过渡的执行顺序。例如，可能在添加类的同时立即改变了display属性，导致过渡无法触发。使用requestAnimationFrame或微小延迟可能有助于让浏览器正确处理过渡。 总结可能的原因： 1. 初始状态未定义，导致过渡无法检测到变化。 2. display属性切换打断了过渡。 3. transition应用的位置不正确。 4. 过渡属性或持续时间未正确设置。 5. 浏览器兼容性问题。 6. JavaScript执行顺序干扰了过渡。 解决方案可能包括： - 使用opacity和visibility代替display，配合过渡。 - 确保transition定义在基础样式中。 - 明确设置初始状态，如opacity:0和visibility:hidden。 - 使用setTimeout或requestAnimationFrame来延迟display属性的改变。 - 检查过渡属性是否正确，添加必要的前缀。</think>### CSS Transition浮层动画不一致的原因分析 #### 问题现象 浮层元素在出现时没有过渡动画效果，但消失时有完整的过渡动画。示例代码结构如下： ```css .popup { opacity: 0; transition: opacity 0.3s; } .popup.active { opacity: 1; } ``` #### 核心原因 1. **初始状态定义不完整** 浮层初始状态缺少`visibility: hidden`，导致浏览器无法正确识别透明度的过渡起点。当元素初始状态为`opacity:0`但未隐藏时，浏览器可能跳过过渡直接渲染最终状态[^1]。 2. **display属性冲突** 使用`display:none`切换显隐时，浏览器会立即执行布局计算，直接中断过渡动画。例如： ```javascript // 错误示例 element.style.display = &#39;block&#39; // 立即触发布局计算 element.classList.add(&#39;active&#39;) ``` 3. **过渡触发时机错误** 过渡效果未定义在基础样式上，例如： ```css /* 错误示例 */ .popup.active { opacity: 1; transition: opacity 0.3s; /* 仅作用于显示阶段 */ } ``` ### 解决方案 #### 方法一：使用visibility+opacity组合 ```css .popup { opacity: 0; visibility: hidden; /* 关键状态 */ transition: opacity 0.3s, visibility 0.3s; } .popup.active { opacity: 1; visibility: visible; } ``` #### 方法二：优化display切换时序 ```javascript // 显示时 element.style.display = &#39;block&#39; requestAnimationFrame(() => { element.classList.add(&#39;active&#39;) }) // 隐藏时 element.addEventListener(&#39;transitionend&#39;, () => { element.style.display = &#39;none&#39; }) element.classList.remove(&#39;active&#39;) ``` #### 方法三：强制布局重绘（兼容方案） ```javascript // 触发浏览器重绘 element.offsetHeight // 强制重绘 element.classList.add(&#39;active&#39;) ``` ### 最佳实践示例 ```html <style> .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; /* Safari兼容 */ } .overlay.active { opacity: 1; visibility: visible; } </style> <script> function toggleOverlay() { const overlay = document.querySelector(&#39;.overlay&#39;) overlay.classList.toggle(&#39;active&#39;) // 处理display切换 if (overlay.classList.contains(&#39;active&#39;)) { overlay.style.display = &#39;block&#39; } else { overlay.addEventListener(&#39;transitionend&#39;, () => { overlay.style.display = &#39;none&#39; }, {once: true}) } } </script> ``` ### 关键原理说明 1. **visibility属性作用** 与`opacity`配合使用可实现可过渡的显隐效果，`visibility:hidden`会保留元素空间但不可交互，适合浮层场景[^3]。 2. **transition执行条件** 浏览器仅在可计算中间值的属性变化时触发过渡动画，直接切换`display:none`会导致过渡中断。 3. **硬件加速优化** 对复杂动画可添加`transform: translateZ(0)`强制启用GPU加速，但需注意图层爆炸问题。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值