Question

如何更改动画持续时间onclick？这就是我所做的，我创建了两个按钮，一个动画显示为10秒，另一个动画显示为20秒。无论我单击哪个按钮，持续时间都是相同的，10秒，就像在课程部分中一样。如何根据按钮点击两个不同的持续时间？请使用普通的Javascript，没有Jquery。谢谢！我还需要使用document.GetElementById（）。classname =＆＃34;＆＃34 ;;就像它在代码中一样。

＆＃13;

function tenseconds() {
  animation();
  var sd = document.getElementById('ghost').className = 'earth';
  sd.style.animationDuration = "10s";
}

function twentyseconds() {
  animation();
  var sd = document.getElementById('ghost').className = 'earth';
  sd.style.animationDuration = "20s";
}

function animation() {
  document.getElementById('ghost').className = 'earth';
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    .earth {
      position: relative;
      animation: move 10s linear;
      background: red;
      height: 20px;
      width: 20px;
    }
    
    @-webkit-keyframes move {
      from {
        left: 0%;
      }
      to {
        left: 100%;
      }
    }
  </style>
</head>

<body>
  <div id="ghost"> </div>
  <button onclick="tenseconds();">10 seconds </button>
  <button onclick="twentyseconds()"> 20 seconds </button>
</body>

</html>

＆＃13;

Answer 1

更新以使用动画，数据属性等。根据需要自定义。 Edge，IE不支持其他人。请您研究解决此问题的可能方法。查看原始“修复”的OLD编辑

我添加了另一个元素和按钮，以便您可以看到它的使用方式。

var myAnimation = {
  keyframes: [
    // keyframes
    {
      transform: 'translateX(0px)'
    },
    {
      transform: 'translateX(300px)'
    }
  ],
  options: {
    // timing options
    // ms of duration default 1 second
    duration: 1000,
    iterations: 1, //forever would be Infinity
    easing: "linear"
  }
};

function animation(target, duration, visual) {
  let sd = document.getElementById(target);
  sd.className = visual;
  myAnimation.options.duration = duration * 1000;
  sd.animate(myAnimation.keyframes, myAnimation.options,visual);
}

function setup() {
  let classThings = document.getElementsByClassName("animate-button");

  let myFunction = function() {
    let duration = this.dataset.duration;
    let visual = this.dataset.visual;
    let target = this.dataset.target;
    animation(target, duration, visual);
  };

  for (var i = 0; i < classThings.length; i++) {
    classThings[i].addEventListener('click', myFunction, false);
  }
}
(function() {
  setup();
})();

<!DOCTYPE html>
<html>

<head>
  <style>
    .fire {
      position: relative;
      background: red;
      height: 20px;
      width: 20px;
    }
    
    .water {
      position: relative;
      background: blue;
      height: 20px;
      width: 20px;
    }
  </style>
</head>

<body>
  <div id="ghost"></div>
  <div id="billy"></div>
  <button class="animate-button" data-duration="10" data-target="ghost" data-visual="fire">10 seconds</button>
  <button class="animate-button" data-duration="20" data-target="ghost" data-visual="fire">20 seconds</button>
  <button class="animate-button" data-duration="5" data-target="billy" data-visual="water">5 seconds billy</button>
</body>

</html>

Answer 2

我创建了一个小函数，以秒为单位将动画时间作为参数。请阅读代码中的注释以获得解释。

function animation(duration) {
  // select whatever element you are trying to animate
  let target = document.getElementById('ghost');
  // change the animationduration before starting to animate
  target.style.animationDuration = `${duration}s`;
  // add the animating class and start the animation
  target.classList.add('animating');
  // create a timeout to remove the animating class from your animated element
  setTimeout(() => {
    target.classList.remove('animating');
  }, `${duration*1000}`);
}

 #ghost{
    position: relative;
    background: red;
    height: 20px;
    width: 20px;
 }
 .animating {
      animation: move 10s linear;
    }
    
    @-webkit-keyframes move {
      from {
        left: 0%;
      }
      to {
        left: 100%;
      }
    }

<!DOCTYPE html>
  <div id="ghost"> </div>
  <button onclick="animation(10);">10 seconds </button>
  <button onclick="animation(20);"> 20 seconds </button>

Javascript - 如何在onclick上更改动画的持续时间

2 个答案: