javascript - 动态动画的问题

Question

我正在创建一个具有 2 个属性的对象:

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

&

animate - 接受目标、动画名称、持续时间和计时函数的函数

I have the animate function checking that atleast one of the selected targets exist and I am also making sure that the animation name matches one of the indexes in animationName.

如果我手动输入 style 属性和动画信息，它会按我预期的那样工作，但是，我似乎无法让代码在 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:

@-webkit-keyframes shake 
    0%
        transform: translateX(0)
    25%
        transform: translateX(-25px)
    50%
        transform: translateX(0)
    75%
        transform: translateX(25px)
    100%
        transform: translateX(0)

@keyframes shake 
    0%
        transform: translateX(0)
    25%
        transform: translateX(-25px)
    50%
        transform: translateX(0)
    75%
        transform: translateX(25px)
    100%
        transform: translateX(0)

@-webkit-keyframes bounce 
    0%
        transform: translateY(0)
    25%
        transform: translateY(-25px)
    50%
        transform: translateY(0)
    75%
        transform: translateY(25px)
    100%
        transform: translateY(0)

@keyframes bounce 
    0%
        transform: translateY(0)
    25%
        transform: translateY(-25px)
    50%
        transform: translateY(0)
    75%
        transform: translateY(25px)
    100%
        transform: translateY(0)

Answer 1

您的代码存在两个问题，导致其无法正常工作，如下所示:

1. document.querySelectorAll 返回一个节点列表，因此您不能直接设置属性。您必须循环遍历返回的节点(或)使用 [x] 将属性分配给节点列表中的单个元素。
2. .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);
}

下面是添加了随机动画效果的示例片段。我在代码片段中包含前缀库只是为了支持旧浏览器(我正在使用一个 :D)。

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[0].setAttribute("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("div", "shake", "0.25s", "infinite");

@keyframes shake {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0px);
  }
}
div {
  height: 200px;
  width: 200px;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Some content</div>