为什么我不能修改应用于元素的js动画()属性？
为什么我不能修改应用于元素的js动画()属性？
提问于 2022-08-08 21:35:42
动画完成后，单击事件将不再工作，实际上，从dev工具中更改值也将无法工作。使用fill: 'none'是可行的，但我想使用动画应用的样式。
这是预期的行为吗？动画完成并将样式作为内联style应用于元素(或者说是吗？)，为什么在这种情况下不能修改它呢？有没有办法保持动画应用的样式，然后修改它？
示例:事件侦听器在动画完成后不再工作。
let square = document.querySelector('.circle')
square.addEventListener('click', () => {
square.style.transform = 'translateY(50px)'
})
let animation = [
{transform: 'translateY(100px)'}
]
square.animate(animation, {duration: 2000, fill: 'both'}).circle {
width: 100px;
height: 100px;
background-color: #c965a6;
border-radius: 50%;
}<div class='circle'></div>
编辑:找到解决方案
使用fill: 'none'，侦听动画完成时的内容，并手动将最后的样式应用于元素。
let anim = square.animate(animation, {duration: 2000, fill: 'none'})
anim.addEventListener('finish', () => {
square.style.transform = 'translateX(0px)'
})虽然这看起来更像是一种解决办法，但我仍然想知道为什么不能修改动画应用的属性
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-08-11 13:16:20
这就是Web动画API (WAAPI)的作用方式。API应用的样式优先于所有其他css样式，甚至内联样式，除非应用了important。请参阅规范的"组合效应“一节。(顺便说一句，API没有更改样式属性，而是在WAAPI上下文中应用样式。您可以通过调用el.getAnimations()获得动画API应用的样式。)
有两种方法可以在应用WAAPI样式之后应用样式：
- 使用
important，如下所示：
square.style.setProperty( 'transform', 'translateY(0px)', 'important' );
- 取消整个动画，然后应用样式：
anim.cancel();
let square = document.querySelector('.circle');
let anim;
square.style.transform = 'translateY(50px)';
square.addEventListener('click', () => {
anim.cancel();
square.style.transform = 'translateY(0px)';
});
let animation = [
{transform: 'translateY(100px)'}
];
anim = square.animate(animation, {duration: 2000, fill: 'both'});.circle {
width: 100px;
height: 100px;
background-color: #c965a6;
border-radius: 50%;
}<div class='circle' ></div>
Stack Overflow用户
发布于 2022-08-11 12:23:03
您可以cancel()您的动画，以便它的影响被删除。
// Beware I renamed your variables so they match better (except for the triangle of course :P)
const square = document.querySelector('.circle')
const keyframes = [
{transform: 'translateY(100px)'}
]
const animation = square.animate(keyframes, {duration: 2000, fill: 'both'})
square.addEventListener('click', () => {
animation.cancel();
square.style.transform = 'translateY(50px)'
}).circle {
width: 100px;
height: 100px;
background-color: #c965a6;
border-radius: 50%;
}<div class='circle'></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73284271
复制相关文章
相似问题
腾讯云开发者
