检测CSS中的旋转结束[重复]答案

【问题标题】：Detect the end of rotation in CSS [duplicate]检测CSS中的旋转结束[重复]
【发布时间】：2019-11-07 21:54:09
【问题描述】：

我正在使用这个过渡来旋转轮子：

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

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

谢谢。

【问题讨论】：

你期待css中的回调吗？
也许你可以给transitionend event添加一个监听器，并使用一些逻辑来发现该事件与转换的目标有关。如果您设法生成一个可行的示例，我们可以提供更多帮助。

标签： javascript css transform

【解决方案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的解决方案它可以检测过渡结束

【讨论】：

【解决方案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

【讨论】：