动态添加的dom css3过渡动画没有反应

隶属感

于 2020-01-31 12:42:53 发布

阅读量1.2k

点赞数

分类专栏： js+html+css

本文链接：https://blog.youkuaiyun.com/qq_36445227/article/details/104123065

版权

js+html+css 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了在JavaScript中创建DOM元素并应用CSS3特效的方法。重点在于如何确保DOM元素被正确添加到文档中后再设置样式，以触发浏览器的重新渲染，从而实现预期的CSS3效果。文章通过实例说明了在设置样式前读取DOM属性的重要性。

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

但是在代码中创建 dom 后没反应

var center = $('<div class="divCenter" style="color:'+color+'">'+n+'</div>')

$('body').append(center);

//getComputedStyle(center[0]).left //让页面从新渲染 否者不会触发 css3 的特效

center.css({"transform":translate,"opacity":"0"})

后面百度才知道要先把dom 加到文档上再设置样式（设置样式时要先执行 getComputedStyle(center[0]).left ）

随便读取一个值就会触发重新渲染

就ok