javascript - 使用 JavaScript 将 Css 动画应用到带有 onclick 的类

Question

我有一个脚本:

function ani(){
    document.getElementById('para').className ='exeInputapparition';
}

在 ID 为 para 的元素上应用 css 动画。 它正在工作，但我想知道是否可以应用于所有具有 class para 而不是 ID 的元素，因为我有超过我需要应用我的 CSS 动画的一个元素。 在此先感谢您的帮助:)

CSS:

@keyframes inputapparition {
    0%   
    {
        opacity: 0;

    }
    100% 
    {

        opacity: 1;

    }

}
.exeInputapparition
{
    animation-name: inputapparition;

        animation-duration: 0.5s;
        animation-fill-mode: forwards;
}
#para 
{
    margin: 0;
    font-family: "Roboto"
    font-size: 20px;

    opacity: 0; 
}

Answer 1

函数querySelectorAll 返回所有元素，它是一个“DOM 数组”，因此没有属性className。您应该循环列表并逐一更改:

var allElementsPara = document.querySelectorAll(".para");

for (var i = allElementsPara.length - 1; i >= 0; i--) {
    allElementsPara.item(i).classList.add("exeInputapparition");
};