Скрыть/показать анимацию на ngShow

Question

Я пытаюсь сделать какую-то презентацию с AngularJS, и я хотел использовать силу ngAnimation, которая до сих пор была массивной.

Я смог использовать fadeIn и fadeOut с переходами CSS без особых проблем, но прямо сейчас я застреваю, пытаясь это выработать.

Я хочу, чтобы текст приходил сверху, и когда наступает следующий «слайд», текущий текст должен быть fadeOutDown, а следующий текст должен быть fadeInDown как предыдущий.

Таким образом, классы должны быть такими:

.animation-fadeInDown-fadeOutDown.ng-hide-add, 
.animation-fadeInDown-fadeOutDown.ng-hide-remove { 
    display: table-cell !important; 
} 

.animation-fadeInDown-fadeOutDown.ng-hide-add { 
    animation-duration: 1.5s; 
    animation-name: fadeOutDown; 
} 

.animation-fadeInDown-fadeOutDown.ng-hide-remove { 
    animation-delay: 10s; 
    animation-duration: 1.5s; 
    animation-name: fadeInDown; 
} 

Что на самом деле происходит то, что эти две анимации в конечном итоге дублирования и отображаются некорректно. Я подготовил plunk с некоторым шаблоном кода, который покажет проблему, как сейчас. И вы скоро поймете, что происходит.

Что я делаю неправильно?

Answer 1

Я думаю, что вы не используете хорошие свойства CSS на классах:

.animation-fadeInDown-fadeOutDown.ng-hide-add, 
.animation-fadeInDown-fadeOutDown.ng-hide-remove 

Попробуйте со следующими правилами CSS, и это должно решить проблему.

.animation-fadeInDown-fadeOutDown.ng-hide-add, 
.animation-fadeInDown-fadeOutDown.ng-hide-remove { 
    display:block!important; 
} 

.animation-fadeInDown-fadeOutDown.ng-hide-add { 
    opacity : 1; 
    -webkit-animation-duration: 1.5s; 
    -moz-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-name: fadeOutDown; 
    -moz-animation-name: fadeOutDown; 
    animation-name: fadeOutDown; 
} 

.animation-fadeInDown-fadeOutDown.ng-hide-remove { 
    opacity : 0; 
    -webkit-animation-delay: 1.5s; 
    -moz-animation-delay: 1.5s; 
    animation-delay: 1.5; 
    -webkit-animation-duration: 1.5s; 
    -moz-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-name: fadeInDown; 
    -moz-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
} 

Работа plunker над here