动态创建的元素怎么做动画

要做动画,一般都是要获取元素的一些基本属性,比如宽,高,颜色等

但是对于动态创建的元素,是不能获取这些属性的

只有插入到dom中,经过渲染才能获取这些属性

但是一旦插入到dom当中,先获取在改变就会有跳动的效果

为了避免这种情况,有两种解决方案

 

• 一种是将元素设置绝对定位,获取之后然后在放到正确位置,这种情况一般用在弹出框的居中显示中
• 一种是将元素设置成visibility:hidden;overflow:hidden;height:0; 然后获取scorllHeight,scrollWidth

这样既可以准确获取,而且也不会有跳动,因为连续的dom样式变动,人的眼睛是感觉不出来的,但是如果先改变一些,再在setTimeout里面再改变一些,这种变动势必会产生跳动

总结:想办法在用户视线外,或者将元素隐藏起来来获取dom的属性,然后一次性改变dom产生动画,这时的动画就是连续的,流畅的