如何在 MS Edge 中的伪元素上进行 CSS 转换后运行一些 javascript？

Question

我在处理 Microsoft Edge 中的“transitionend”事件时遇到了问题，在伪元素上。

它适用于其他浏览器，如 chrome、safari 和 firefox。我认为这可能是 MS Edge 的一个错误，但它在 IE11 中也不起作用，所以也许我在 Microsoft 世界中还缺少其他一些方法。

有谁知道如何在 IE 中处理这个问题？

这里是代码...如果transitionend事件被正确处理，淡入完成后该框将变为绿色。

window.setTimeout(function(){
  
  $('#box').one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',function(){
    $(this).addClass('done');
  });
  
  $('#box').addClass('show');
  
},1);

#box {
  position: relative;
}
#box:before {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: tomato;
  transition: opacity 1s;
  opacity: 0;
  content: "";
}
#box.show:before {
  opacity: 1;
}
#box.done:before {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="box"></div>

Answer 1

#box {
  position: relative;
}
#box > .before {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: tomato;
  transition: opacity 1s;
  opacity: 0;
  content: "";
}
#box.show > .before {
  opacity: 1;
}
#box.done > .before {
  background-color: green;
}

IE11 在伪元素上的 transitionend 存在问题。如果在父容器内添加了额外的元素。这对我有用！

Answer 2

你用过jQuery的.animate()函数吗，可以在最后放一个函数来运行，像这样：

$(document).ready(function() {
  $('#box').animate({opacity: 1}, 1000, function() {
    $('#box').animate({background-color: green}, 1000);
  });
});

背景色只有在完成淡入后才会变为绿色。希望这会有所帮助！