在使用动画的时候,commitStyles方法并不会实际设置元素的样式,而是将样式存储在动画对象中。要实现动画效果,必须在渲染前将样式值设置为最终值。可以使用动画对象的onComplete方法来触发渲染前的样式设置。
示例代码如下:
const animation = new Animation();
animation.fromTo(element, 'width', '100px', '200px');
animation.onComplete(() => {
element.style.width = '200px';
});
animation.play();