transition动画正在执行时获取的样式值
本文由 liuxianan 发表于 2016-07-18 浏览(470) 下载md
最后修改 2016-07-18 标签:css3 transition 运行中 执行中 获取 样式

先看代码

将一个div从left为0的地方移动到1000的地方,采用transition动画,动画执行中获取到的left值为多少呢?

element.style {
    position: absolute;
    transition: left 10s;
    left: 0px;
    left: 1000px;
}

测试($0表示测试那个div):

$0.style.left // "1000px"
getComputedStyle($0, null).left // "834.718px"
$0.offsetLeft // 576
$0.getBoundingClientRect().left // 628.8125

结论

通过测试可以发现,除了element.style.left获取到的是最终的left值,也就是1000px,其它几个方法获取到的全部是动画运行中的值。