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, переход никогда не воспроизводится. Не запускается событие перехода (только IE) или события перехода.

Вот такой plunker, иллюстрирующий проблему:

http://plnkr.co/vpJzudnLxTwoJGZoZaNd

Кто-нибудь есть идея, что является причиной этого?

Answer 1

Этот 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> 

"Внешний" работает как в IE и Chrome.

Хромирует итерационную анимацию для «Внутреннего», что имеет смысл. 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; 
}