display与transition动画冲突问题

最新推荐文章于 2023-12-23 13:16:50 发布

LEMOSSR

最新推荐文章于 2023-12-23 13:16:50 发布

阅读量792

点赞数

分类专栏：前端文章标签： css css3 html javascript 前端

本文链接：https://blog.csdn.net/fruiva/article/details/105912232

版权

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

摘要由CSDN通过智能技术生成

文章目录

第一版解决方法
更详细的方法与原理
详细总结与权衡
- 这个亲测非常非常好使

给图片切换写动画的时候，使用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"
	}