Angularjs ng动画和ng如果导致过渡不在Internet Explorer中播放

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

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

将foo visible类添加到div后，将播放转换

这在铬合金上很好用

然而，一旦我在它周围添加了一个包装器div，这个转换就停止在IE10测试的InternetExplorer中工作

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

我需要在这个案例中包括ngAnimate。然后它在Chrome中工作，但在IE中，我立即得到了红色的div，过渡从未被播放过。不触发transitionstart IE only或transitionend事件

下面是一个例子来说明这个问题：

---

有人知道是什么原因导致了这种情况吗？

这个plnkr为您添加了两个类似的框

---

我找到了一个更好的答案

<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>

.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;
}