要做动画,一般都是要获取元素的一些基本属性,比如宽,高,颜色等
但是对于动态创建的元素,是不能获取这些属性的
只有插入到dom中,经过渲染才能获取这些属性
但是一旦插入到dom当中,先获取在改变就会有跳动的效果
为了避免这种情况,有两种解决方案
- 一种是将元素设置绝对定位,获取之后然后在放到正确位置,这种情况一般用在弹出框的居中显示中
- 一种是将元素设置成visibility:hidden;overflow:hidden;height:0; 然后获取scorllHeight,scrollWidth
这样既可以准确获取,而且也不会有跳动,因为连续的dom样式变动,人的眼睛是感觉不出来的,但是如果先改变一些,再在setTimeout里面再改变一些,这种变动势必会产生跳动
总结:想办法在用户视线外,或者将元素隐藏起来来获取dom的属性,然后一次性改变dom产生动画,这时的动画就是连续的,流畅的