animationend在css上启动，但不在javascript上启动

我在

animationend

方面遇到了一些问题，我不理解。我仍然不明白到底发生了什么（也许我会在后面补充更多关于我实际看到的内容），但我去了CodePen并借用了一个例子，它在纯CSS和JavaScript中只使用

animate

制作完全相同的动画

我的修改示例如下：

代码中有趣的部分是：

var-elements=document.querySelectorAll（'.js-li'）；
var=[]；
对于（变量i=0，len=elements.length；i

动画可以工作，但是我没有得到

animationend

事件（我在CSS版本中得到这个事件）

---

这里有什么问题？

您可以使用

返回的对象的
.onfinish
属性来实现类似的结果

像这样：


const-liEnds=document.querySelectorAll（'li'）；
对于（让李放弃留置权）{
li.addEventListener（“animationend”，函数（）{
this.style.background=“绿色”；
});
li.addEventListener（“animationstart”，函数（）{
this.style.background=“#55f”；
});
}
constulends=document.queryselectoral（'ul'）；
对于（让ul的ulEnds）{
ul.addEventListener（“动画结束”，函数（）{
this.style.background=“#ff0”；
});
ul.addEventListener（“animationstart”，函数（）{
this.style.background=“#f00”；
});
}
const elements=document.querySelectorAll（'.js li'）；
常量动画=[]；
elements.forEach（element=>{
var animation=element.animate([{
变换：“旋转（0度）”，
偏移量：0
},
{
变换：“旋转（-12度）”，
偏移量：.08
},
{
变换：“旋转（270度）”，
偏移量：.3
},
{
变换：“旋转（-40度）”，
偏移量：.55
},
{
变换：“旋转（70度）”，
偏移量：.8
},
{
变换：“旋转（-13度）”，
偏移量：.92
},
{
变换：“旋转（0度）”，
偏移量：1
}
], {
时长：3000，
//迭代：无限，
“线性”，
延迟：0
});
animation.onfinish=函数（）{
element.style.background='green'；
element.parentElement.style.background=“#ff0”；
};
element.style.background=“#55f”；
element.parentElement.style.background=“#f00”；
动画。推送（动画）；
});
document.querySelector（'.css'）.classList.add（'activated'）；
document.querySelector（'.js'）.classList.add（'activated'）；
正文{
背景：#135569；
}
保险商实验室{
显示：内联块；
宽度：6雷姆；
}
李{
背景：#dedfee；
身高：4rem；
宽度：4rem；
显示：块；
保证金：2rem 0 2rem 2rem；
边界半径：1em；
}
李先生{
背景：#d05f5e；
动画：翻译3s 0s 1线性；
}
@关键帧平移{
0% {
变换：旋转（0度）
}
8% {
变换：旋转（-12度）
}
30% {
变换：旋转（270度）
}
55% {
变换：旋转（-40度）
}
80% {
变换：旋转（70度）
}
92% {
变换：旋转（-13度）
}
100% {
变换：旋转（0度）
}
}
保险商实验室{
背景色：#e70；
}
a{
位置：绝对位置；
底部：0；
填充：1rem；
左：0；
右：0；
颜色：#fafbff；
背景#fafbff20；
字体系列：系统界面，无衬线；
}

js
js


css
css
您可以使用
返回的对象的
.onfinish
属性来实现类似的结果

像这样：


const-liEnds=document.querySelectorAll（'li'）；
对于（让李放弃留置权）{
li.addEventListener（“animationend”，函数（）{
this.style.background=“绿色”；
});
li.addEventListener（“animationstart”，函数（）{
this.style.background=“#55f”；
});
}
constulends=document.queryselectoral（'ul'）；
对于（让ul的ulEnds）{
ul.addEventListener（“动画结束”，函数（）{
this.style.background=“#ff0”；
});
ul.addEventListener（“animationstart”，函数（）{
this.style.background=“#f00”；
});
}
const elements=document.querySelectorAll（'.js li'）；
常量动画=[]；
elements.forEach（element=>{
var animation=element.animate([{
变换：“旋转（0度）”，
偏移量：0
},
{
变换：“旋转（-12度）”，
偏移量：.08
},
{
变换：“旋转（270度）”，
偏移量：.3
},
{
变换：“旋转（-40度）”，
偏移量：.55
},
{
变换：“旋转（70度）”，
偏移量：.8
},
{
变换：“旋转（-13度）”，
偏移量：.92
},
{
变换：“旋转（0度）”，
偏移量：1
}
], {
时长：3000，
//迭代：无限，
“线性”，
延迟：0
});
animation.onfinish=函数（）{
element.style.background='green'；
element.parentElement.style.background=“#ff0”；
};
element.style.background=“#55f”；
element.parentElement.style.background=“#f00”；
动画。推送（动画）；
});
document.querySelector（'.css'）.classList.add（'activated'）；
document.querySelector（'.js'）.classList.add（'activated'）；
正文{
背景：#135569；
}
保险商实验室{
显示：内联块；
宽度：6雷姆；
}
李{
背景：#dedfee；
身高：4rem；
宽度：4rem；
显示：块；
保证金：2rem 0 2rem 2rem；
边界半径：1em；
}
李先生{
背景：#d05f5e；
动画：翻译3s 0s 1线性；
}
@关键帧平移{
0% {
变换：旋转（0度）
}
8%