动态动画的问题

Issues with dynamic animations

本文关键字：问题 动画 动态      更新时间：2023-09-26

我正在创建一个对象，它有2个属性:

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

和

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

我有一个动画函数检查，至少有一个选择目标存在，我也要确保动画名称匹配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)

你的代码有两个问题，这是阻止它正常工作，他们如下:

  1. document.querySelectorAll返回一个节点，所以你不能直接设置属性。您必须循环遍历返回的节点(或)使用[x]将属性分配给节点列表中的单个项目。
  2. .attr()是一个jQuery方法，但el不是一个jQuery对象。你需要使用香草JS等效的.setAttribute。

如果你想通过对一个节点应用动画属性(通过style属性)来测试，那么使用下面的代码，它将只对返回的第一个节点应用该属性。

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>

相关文章：