ng-animate和ng-if会导致在Internet Explorer中无法播放过渡

Question

我有一个简单的div，有一个过渡。它从一个黄色的背景过渡到一个红色的。

<div class="foo" ng-class="{'foo-visible': vm.visible}">

当foo——visible类被添加到div中时，转换就会被播放。

这在Chrome, IE等中都可以正常工作

但是，一旦我在它周围添加包装器div，转换就停止在Internet Explorer中工作(用IE10测试)。

<div class="foo--wrapper" ng-if="vm.visible">
    <div class="foo" ng-class="{'foo--visible': vm.visible}">
</div>

在这个例子中我需要包含ngAnimate。然后它在Chrome中工作，但在IE中我立即得到红色div，过渡从未播放。没有触发transitionstart(仅限IE)或transitionend事件。

这是一个说明问题的柱塞:

http://plnkr.co/vpJzudnLxTwoJGZoZaNd

有人知道是什么原因造成的吗?

Answer 1

此plnkr为您的plnkr添加了两个类似的框。http://plnkr.co/edit/lkyWHu?p=preview

<div ng-if="vm.visible">
  <div class="animate-box animate-if">
    <h2>Inner Class</h2>
  </div>
</div>
<div  class="animate-box animate-if" ng-if="vm.visible">
  <div>
    <h2>Outer Class</h2>
  </div>
</div>

"Outer"在IE和Chrome中都可以使用。

Chrome以一种合理的方式迭代"Inner"的子动画。如您所举的例子，Internet Explorer不支持。

关闭时，也不删除子动画，因为删除父动画的延迟为零。

一个有趣的观点，IE和Chrome似乎工作相同的权威答案https://docs.angularjs.org/api/ngAnimate/directive/ngAnimateChildren

我使用的CSS是:

.animate-box {
  height: 100px;
  width: 100px;
  background-color: red;
}
.animate-if.ng-animate {
  transition: all 3s linear;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  background-color: yellow;
  opacity: 0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  background-color: red;
  opacity: 1;
}