Question

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

animationName - 包含预先制作的@keyfame动画名称的数组

＆安培;

动画 - 接受目标，动画名称，持续时间和计时功能的功能

我有animate函数检查至少一个选中的目标存在，我也确保动画名称匹配animationName中的一个索引。

如果我手动输入$.get(url, function(data) { var win=window.open('',"_blank"); win.history.pushState({ 'page_id': 1}, "newpage", "https://www.url.com/stuff/"); //this line doesn't work with(win.document){ open(); write(data); close(); } } )属性和动画信息，它会像我期望的那样工作，但是，我似乎无法让代码在JS中工作！

我尝试了style之类的不同内容，但我非常确定.prop()是对的。

这是JS：

.attr()

SASS：

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");

Answer 1

您的代码存在两个问题，即它无法正常工作，它们如下所示：

document.querySelectorAll返回节点列表，因此您无法直接设置属性。您必须循环返回的节点（或）使用[x]将属性分配给节点列表中的单个项目。
.attr()是一个jQuery方法，但el不是jQuery对象。您需要使用.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>

动态动画的问题

1 个答案: