Угловая анимация не работает

Question

Я пытаюсь использовать анимацию шоу на DIV,

<div class="animate-show title span3" ng-show="status.processing" ng-bind="status.message" > 

     </div> 

и CSS имеет

.animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove- active { 
-webkit-transition: 1s linear all; 
-moz-transition: 1s linear all; 
-ms-transition: 1s linear all; 
-o-transition: 1s linear all; 
transition: 1s linear all; 
} 

.animate-show.ng-hide { 
line-height:0; 
opacity:0; 
padding:0 10px; 
} 

.animate-show { 
line-height:20px; 
opacity:1; 
padding:10px; 
    } 

Любое предложение, почему это не будет работать? Я вижу свое шоу div и скрываю, но анимация не работает.

Answer 1

Я думаю, вам нужно добавить классы ng-enter/ng-leave в свой CSS. Кроме того, определяют состояние перехода на одушевленной-шоу до возникновения каких-либо анимации, следовательно, удалить такие вещи, как ng-hide-add.ng-hide-add-active

Try:

.animate-show{ 
    -webkit-transition: 1s linear all; 
    -moz-transition: 1s linear all; 
    -ms-transition: 1s linear all; 
    -o-transition: 1s linear all; 
    transition: 1s linear all; 
} 

.animate-show.ng-hide 
.animate-show.ng-leave { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

.animate-show, 
.animage-show.ng-enter, 
.animage-show.ng-move { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
} 

Если вы не хотите использовать нг-шоу, вот пример который использует ng-класс: http://plnkr.co/edit/FQDRUkSoellXEFMET33z?p=preview