display与transition动画冲突问题

最新推荐文章于 2022-10-19 23:20:46 发布

原创

最新推荐文章于 2022-10-19 23:20:46 发布 · 963 阅读

2 ·

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"
	},