Представления ui-router и ng-animate работают только с атрибутами, но не с классами

Question

У меня есть этот HTML:

<div class="slide1" ui-view="slide1"></div>
<div class="slide2" ui-view="slide2"></div>

И этот CSS:

[ui-view].ng-enter {
    /* ... */
}

[ui-view].ng-enter.ng-enter-active {
    /* ... */
}

Это работает, но если я изменю [ui-view] либо .slide1 или же .slide2не работает Например:

.slide1.ng-enter {
    /* ... */
}

.slide1.ng-enter.ng-enter-active {
    /* ... */
}

Что здесь происходит?

Answer 1

По какой-то причине, когда <ui-view> элемент используется анимации не будут работать. Однако, если вы пометите свой элемент контейнера маршрутизатора с ui-view атрибут, а не с <ui-view> Элемент анимации будет работать.

В качестве атрибута элемента HTML работает:

<div ui-view class="slide1"></div>

Как отдельный элемент не работает:

<ui-view class="slide1"></ui-view>