javascript - 依次触发 jQuery 事件

Question

嗨，我正在尝试创建一个动画，其中仅在触发完成之前的类之后添加一个类。

$('.flipper').click(function(){
  $('#first').addClass('first-flip');
  $('#second').addClass('second-flip');
  $('#fourth').addClass('fourth-flip');
});

所以

$('#second').addClass('second-flip');

仅在以下情况下触发

$('#first').addClass('first-flip');

已完成其过程。

所以另一种解释方式是。

A block 添加了旋转效果，A block 旋转后，B block 才会向右移动20px。

我基本上只是想知道如何创建按顺序触发的 Jquery 效果。

Answer 1

您想要绑定(bind)到 transitionend 或 animationend。这是使用 transitionend 的示例。盒子完成移动后，将添加一个新类，该类开始下一个转换以使盒子变成蓝色。

var mydiv = document.querySelector("#mydiv");

document.querySelector("button").addEventListener("click", buttonHandler);
mydiv.addEventListener("transitionend", onEndHandler)
  
function buttonHandler() {
  mydiv.classList.add("move-left");
}

function onEndHandler() {
  mydiv.classList.add("turn-blue");
}

#mydiv {
  background: red;
  width: 10em;
  height: 10em;
  transition: 1s;
}

#mydiv.move-left {
  transform: translateX(100px);
}

#mydiv.turn-blue {
  background: blue;
}

<div id="mydiv"></div>
<button>Move div</button>

如果您需要 jQuery 版本，可以在这里:

var mydiv = $("#mydiv");

$("button").on("click", buttonHandler);
mydiv.on("transitionend", onEndHandler)

function buttonHandler() {
  mydiv.addClass("move-left");
}

function onEndHandler() {
  mydiv.addClass("turn-blue");
}

不错的资源:https://davidwalsh.name/css-animation-callback