ng-animate и ng-if вызывают переход не воспроизводится в Internet Explorer

Question

ng-animate и ng-if вызывают переход не воспроизводится в Internet Explorer

0

У меня есть простой div, который имеет переход. Он переходит с желтого фона на красный.

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

Переход воспроизводится, как только foo - видимый класс добавляется в 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) или события перехода.

Здесь показан плункер, иллюстрирующий проблему:

http://plnkr.co/vpJzudnLxTwoJGZoZaNd

Кто-нибудь есть идея, что вызывает это?

Christophe Geers 22 сен. 2015, в 12:25

Источник

Теги:

angularjs

css3

css-transitions

ng-animate

1 ответ

Ещё вопросы

jwal · Answer 1 · 2016-05-10T11-33-00.000Z

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

Я нашел гораздо лучший ответ на этот вопрос на bennadel.com/blog/…