动态创建的元素怎么做动画
Posted rongping前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态创建的元素怎么做动画相关的知识，希望对你有一定的参考价值。
要做动画,一般都是要获取元素的一些基本属性,比如宽,高,颜色等
但是对于动态创建的元素,是不能获取这些属性的
只有插入到dom中,经过渲染才能获取这些属性
但是一旦插入到dom当中,先获取在改变就会有跳动的效果
为了避免这种情况,有两种解决方案
- 一种是将元素设置绝对定位,获取之后然后在放到正确位置,这种情况一般用在弹出框的居中显示中
- 一种是将元素设置成visibility:hidden;overflow:hidden;height:0; 然后获取scorllHeight,scrollWidth
这样既可以准确获取,而且也不会有跳动,因为连续的dom样式变动,人的眼睛是感觉不出来的,但是如果先改变一些,再在setTimeout里面再改变一些,这种变动势必会产生跳动
总结:想办法在用户视线外,或者将元素隐藏起来来获取dom的属性,然后一次性改变dom产生动画,这时的动画就是连续的,流畅的
以上是关于动态创建的元素怎么做动画的主要内容，如果未能解决你的问题，请参考以下文章