Javascript 动态动画的问题

我正在创建一个具有两个属性的对象：

animationName-一个包含预制@keyfame动画名称的数组

&

动画制作-一种接受目标、动画名称、持续时间和计时功能的功能

我有动画功能检查至少一个选定的 目标存在，我还确保动画名称 匹配animationName中的一个索引

如果我手动输入

样式

属性和动画信息，它会像我预期的那样工作，但是，我似乎无法让代码在JS中工作

我尝试过不同的方法，比如

.prop（）

，但我非常确定

.attr（）

是正确的

以下是JS：

var animateElement = {
            //put in our animations that we know exist
            animationName: ["bounce", "shake"],
            //set up an animate renderer
            animate: function(target, animationName, duration, timingFunction) {
                        //cache the known animations in an easy to use variable
                        var selectedAnim = this.animationName;

                        //query the target to make sure it exists
                        var el = document.querySelectorAll(target);

                        //make sure atleast one of the targets exist
                        if (el.length != -1) {
                                    //check if the parameter animation is equal to one of our available animations
                                    if ($.inArray(animationName, selectedAnim) != -1) {
                                                //if the animation exists, change the style attribute of the target element to run the animation
                                                el.attr("style", "animation:" + animationName + " " + duration + " " + timingFunction);
                                    } else {
                                                //otherwise alert that the selected animation is invalid (doesn't match our array of known animations)
                                                alert("invalid animation selected");
                                    }
                        }
            },
}
animateElement.animate("button", "shake", "0.25s", "infinite");

SASS：

---

您的代码有两个问题妨碍其正常工作，如下所示：

document.querySelectorAll

返回节点列表，因此不能直接设置属性。您必须循环遍历返回的节点（或）使用

[x]

将属性分配给节点列表中的单个项

.attr（）

是jQuery方法，但

el

不是jQuery对象。您需要使用与vanilla JS等效的

.setAttribute

如果要通过为一个节点应用动画属性（通过样式属性）进行测试，请使用下面的代码，它将仅将该属性应用于返回的第一个节点

el[0].setAttribute("style", "-webkit-animation:" + animationName + " " + duration + " " + timingFunction);

对于您的实际场景，遍历通过使用如下所示的For循环返回的所有节点，然后指定动画属性：

for (var i = 0; i < el.length; i++) {
  el[i].setAttribute("style", "animation:" + animationName + " " + duration + " " + timingFunction);
}

@关键帧抖动{
从{
转换：translateX（200px）；
}
到{
转换：translateX（0px）；
}
}
div{
高度：200px；
宽度：200px；
边框：1px实心；
}

一些内容

那么您想要什么功能？我不明白你的意思！是否可以在问题中包含

css

？是否为动画定义了

keyframes

？它没有像我预期的那样添加style属性，但我知道该条件已满足，因为如果我运行警报，它将弹出，因此我不知道为什么属性没有添加信息keyframes在css中定义，是“I querySelectorAll（）因为我希望任何使用它的人如果愿意，都能够针对多个对象，因此返回[0]将是倒退的。“请参阅上面的文档链接。@SkullDev:总是很乐意帮助pal。为了更好地分类，我将在问题中添加几个相关标记，希望您不介意：）一点也不，如果这对其他人有帮助，那就更好了：），分类吧！

for (var i = 0; i < el.length; i++) {
  el[i].setAttribute("style", "animation:" + animationName + " " + duration + " " + timingFunction);
}