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

Posted 2023-03-06

【中文标题】检测CSS中的旋转结束[重复]

【英文标题】：Detect the end of rotation in CSS [duplicate]

【发布时间】：2019-11-07 21:54:09

【问题描述】：

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

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

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

谢谢。

【问题讨论】：

你期待css中的回调吗？

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

【参考方案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