Question

我通过使用此过渡对车轮进行一些旋转：

transform: rotate(180deg);
transition: transform 10s cubic-bezier(.5,.1,.15,1);

现在，如何使用JS检测转换的发送？

谢谢。

Answer 1

function whichTransitionEvent(){
var t,
  el = document.createElement("fakeelement");

var transitions = {
  "transition"      : "transitionend",
  "OTransition"     : "oTransitionEnd",
  "MozTransition"   : "transitionend",
  "WebkitTransition": "webkitTransitionEnd"
}


for (t in transitions){
  if (el.style[t] !== undefined){
    return transitions[t];
    }
 }
}

var transitionEvent = whichTransitionEvent();


    $(".button").click(function(){
    $(this).addClass("animate");
   $(this).one(transitionEvent,
              function(event) {
    alert("The transition has ended!");
    $(this).removeClass("animate");
  });
});

使用jQuery的解决方案它可以检测到过渡结束

Answer 2

尝试执行以下操作以检测转换结束：

off()方法可用于回调函数，以确保仅触发一次。

$("#someSelector")
.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

如果您使用的是纯js，则可以使用以下代码：

element.addEventListener("webkitTransitionEnd", callfunction,false);
element.addEventListener("transitionend", callfunction,false);
element.addEventListener("oTransitionEnd", callfunction,false);
element.addEventListener("MSTransitionEnd", callfunction,false);

更多参考文献：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

在CSS中检测旋转结束

2 个答案: