L'animazione angolare non funziona correttamente alla prima esecuzione quando l'elemento è inizialmente nascosto

Question

Sto collegando una barra di stato sulla mia app angolare, lo scopo è quando viene fatta una richiesta al server la barra mostrerà il messaggio di risposta, avrà un colore di sfondo per indicare il successo o l'errore, e se è riuscito a nascondersi dopo pochi secondi.

Quello che sto vedendo è che la prima volta che questa logica viene eseguita dopo aver caricato la pagina, le animazioni non vengono eseguite (non vengono eseguite sia la dissolvenza in apertura che quella in uscita), ma solo se l'elemento della barra di stato è nascosto inizialmente , se imposto la variabile ng-show su true a pagina carica tutte le animazioni funzionano come previsto.

Ho ispezionato la fonte tramite gli strumenti di sviluppo di chrome e durante questa prima esecuzione il div ha queste classi alert-bar ng-hide-remove ng-hide-remove-active alert-bar-success ng-animate ng-hide dopo che l'animazione avrebbe dovuto essere terminata. Quando l'animazione funziona, le uniche classi presenti sono alert-bar alert-bar-success ng-animate ng-hide.

Il codice HTML:

<div class="alert-bar" ng-show="response.show" ng-class="(response.result == true) ? 'alert-bar-success' : 'alert-bar-danger'"> 
    <div class="container"> 
     <label>Message: {{response.message}}</label> 
    </div> 
</div> 

Il CSS:

.alert-bar { 
    width: 100%; 
    margin-top: -20px; 
    margin-bottom: 20px; 
} 

.alert-bar-success { 
    background-color: #5cb85c; 
    border-color: #4cae4c; 
    color: #ffffff; 
} 

.alert-bar-danger { 
    color: #ffffff; 
    background-color: #d9534f; 
    border-color: #d43f3a; 
} 

.alert-bar.ng-hide-add, .alert-bar.ng-hide-remove { 
    -webkit-transition:all linear 0.3s; 
    -moz-transition:all linear 0.3s; 
    -o-transition:all linear 0.3s; 
    transition:all linear 0.3s; 
    display:block!important; 
} 

.alert-bar.ng-hide-add.ng-hide-add-active, 
.alert-bar.ng-hide-remove { 
    opacity:0; 
} 

.alert-bar.ng-hide-add, 
.alert-bar.ng-hide-remove.ng-hide-remove-active { 
    opacity:1; 
} 

Il controllore:

controllers.controller("AppController", ['$scope', '$timeout', function($scope, $timeout) { 
    $scope.response = {}; 

    $scope.response.received = function(message, result) { 
     $scope.response.message = message; 
     $scope.response.result = result; 
     $scope.response.show = true; 
     if (result == true) { 
      $timeout(function() { 
       $scope.response.show = false; 
      }, 4000); 
     } 
    }; 
}]); 

Answer 1

Questo accade a causa dell'interazione tra il codice di animazione applicato sia per il ng-class e ng-hide direttive. L'unico modo in cui ho realizzato cose come questa è di usare elementi separati che sono mostrati/nascosti in modo condizionale ma che hanno classi statiche.

Ecco un plunkr che illustra la suddivisione di cui sopra in due <div> elementi per creare un esempio di lavoro per il problema in questione:

http://plnkr.co/edit/PFNGkOLKvs8Gx9h1T6Yk?p=preview

In alternativa, si potrebbe rinunciare l'uso di ng-hide/ng-show tutto e utilizzare ng-class esclusivamente.

Modifica: vedere http://plnkr.co/edit/JiLPc6cqiLHR21c64cCy?p=preview per una versione che utilizza esclusivamente ng-class.

Answer 2

Non è necessario utilizzare due div. Immagino che la soluzione più semplice sia semplicemente mettere il css animato nella classe "ng-hide-add-active" solo, non in "ng-hide-add". Come sotto:

.page-ready-animate.ng-hide-add-active { 
    -webkit-animation: 0.5s fadeOutDown; 
    animation: 0.5s fadeOutDown; 
}