Question

此fiddle在Chrome中运行良好，但在Edge浏览器中，“transitionend”事件不会触发。

function detectTransitionEvent(){
  var t;
  var 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];
    }
  }
}
END_TRANSITION_EVENT = detectTransitionEvent();

function f() { alert(1); }
var d = document.getElementById("a");

d.addEventListener(END_TRANSITION_EVENT, f);

请帮忙，
迈克尔

Answer 1

如果从CSS选择器中移除：之前，只需使用#a元素，则您的小提琴将在MS Edge中起作用。 New Fiddle

#a {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#a:hover {
  width: 200px;
}

我还发现使用calc（）可以防止在MS Edge中触发transitionstart和transitionend事件。

#a{
  content: "";
  display: block;
  width: calc(50%);
  height: 100px;
  background: red;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

从几个小提琴中，我发现两者都没有：之前/：在MS Edge中支持伪元素和calc（）之后。 CanIUse，W3Schools或MS Edge文档尚未提及这些问题。

顺便提一下，转化MS Edge会使用对象中的第一个元素（＆＃39;转换＆＃39;：＆＃39; transitionend＆＃39;）。

在Edge上未触发的伪元素的Transitionend

1 个答案: