时间戳

首页 > 解决方案 > 在“animationend”上循环点击事件函数

javascript - 在“animationend”上循环点击事件函数

问题描述

我有一个关于如何在动画结束时循环点击事件本身的问题

我有 3 张图片我想在点击时通过订单旋转：

  1. 首先点击第一张图片->第一张图片旋转，
  2. 第二次点击第二张图片->第二张图片旋转，
  3. 第三次点击第三张图片->第三张图片旋转

添加事件侦听器是相同的，所以我试图用 myEndFunction() 循环函数本身，但它似乎不行

在第二次单击时，第二张图片正在移动，但我仍然必须单击第一张图片

这是html（非常经典的）：

<body>

<img id ="first" src= "https://i.ibb.co/bPWLLjV/bookermini.png" alt="booker">

<img id ="second" src= "https://i.ibb.co/KKKqrBp/bobafettmini.png" alt="boba">

<img id ="third" src= "https://i.ibb.co/2yXfmvJ/hommemini.png" alt="joxer">

</body>

这是css（移动部分）：

.move {
  position : relative;
  animation: mymove 1s ;
}

@keyframes mymove {
  100%{transform: rotate(360deg); }
}

这是js代码：

var x = document.getElementById("first");
x.addEventListener('click', event => {
    x.classList.add("move");
    x.addEventListener("webkitAnimationEnd", myEndFunction);
    x.addEventListener("animationend", myEndFunction);

    function myEndFunction() {
       x = document.getElementById("second");
    }

});

如果您想尝试，这里是一个 codepen：https ://codepen.io/minise/pen/vYGpqJZ

请问我需要你的帮助！

标签： javascripthtmlcss

解决方案

似乎您正在使用一个#id选择器，它总是返回第一次出现并停止。

我的建议是，改用类标识符并重用您的操作功能。

var version1 = function () {
  // get all containers that has the class rotate-me
  var rotateMe = document.querySelectorAll('.version-1 .rotate-me');
  // define animation duration, this is better than css animationend
  var animationDuration = 1000; // milliseconds

  // recursive animation sequence
  var startSequence = function (classname, items) {
    var [first, ...rest] = items;

    first.classList.add('rotate');

    setTimeout(function () {
      if (rest.length > 0) {
        startSequence(classname, rest)
      }
    }, animationDuration);
  };
  
  // click handle that starts the sequence
  var handleClick = function () {
      startSequence('rotate', rotateMe);
  };
  
  // check if one rotateMe was matched
  if (rotateMe.length > 0) {
    // add you action callback to the first match
    rotateMe[0].addEventListener('click', handleClick);
  }
}

// this version is blocking click before previeous element was clicked
var version2 = function () {
  // get all containers that has the class rotate-me
  var rotateMe = document.querySelectorAll('.version-2 .rotate-me');

  // define animation duration, this is better than css animationend
  var animationDuration = 1000; // milliseconds
  
  // active index
  var activeElement = 0;
  
  // click handle that starts the sequence
  var handleClick = function (index, item) {
      if (index === activeElement) {
        item.classList.add('rotate');
        activeElement += 1;
      }
  };

  for (var i = 0, l = rotateMe.length; i < l; i += 1) {
    // add you action callback to the first match
    rotateMe[i].addEventListener('click', (function (index, item) {
      return function () {
        handleClick(index, item);
      };
    })(i, rotateMe[i]));
  }
}


window.onload = function() {
  version1(); 
  version2(); 
}
.wrapper {
  display: flex;
}

.rotate-me {
  border-radius: 50%;
  overflow: hidden;
  font-size: 0;
}

.rotate-me:first-child {
  cursor: pointer;
}
.rotate-me.rotate {
  cursor: initial;
}
.rotate-me.rotate {
  transition: transform 1s;
  transform: rotate(360deg);
}
<h2>Version 1</h2>
<div class="wrapper version-1">
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
</div>
<h2>Version 2</h2>
<div class="wrapper version-2">
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
    <div class="rotate-me">
        <img src="http://placekitten.com/150/150" alt="kitten placeholder">
    </div>
</div>

推荐阅读