Animacja kątowa nie działa poprawnie przy pierwszym uruchomieniu, gdy element jest początkowo ukryty

Question

Podłączam pasek stanu do mojej aplikacji kątowej, celem jest, gdy żądanie zostanie wysłane do serwera, na którym pasek wyświetli komunikat odpowiedzi, będzie miało kolor tła oznaczający sukces lub błąd, a jeśli udało się ukryć po kilku sekundach.

To, co widzę, to to, że po pierwszym uruchomieniu tej logiki po załadowaniu strony animacje nie są uruchamiane (zarówno zanikanie, jak i czasowe zaniki nie działają), ale tylko wtedy, gdy element paska stanu jest początkowo ukryty , jeśli ustawię zmienną ng-show na true podczas ładowania strony, wszystkie animacje działają zgodnie z oczekiwaniami.

Zrobiłem inspekcję źródła za pomocą narzędzi programistycznych Chrome i podczas tego pierwszego uruchomienia div ma te klasy alert-bar ng-hide-remove ng-hide-remove-active alert-bar-success ng-animate ng-hide po zakończeniu animacji. Gdy animacja działa, jedyne dostępne klasy to alert-bar alert-bar-success ng-animate ng-hide.

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> 

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; 
} 

Kontroler:

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

Dzieje się tak ze względu na wzajemne oddziaływanie między kodem animacji stosowanej zarówno ng-class i ng-hide dyrektywy. Jedynym sposobem, w jaki zrobiłem takie rzeczy, jest użycie oddzielnych elementów, które są pokazane/ukryte warunkowo, ale które mają klasy statyczne.

Oto plunkr który demonstruje dzieląc powyższe pod dwoma <div> elementów do stworzenia pracy przykład za problem w pytaniu:

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

Alternatywnie, można zrezygnują z korzystania z ng-hide/ng-show całkowicie i używaj wyłącznie ng-class.

Edycja: patrz http://plnkr.co/edit/JiLPc6cqiLHR21c64cCy?p=preview dla wersji, która używa wyłącznie ng-class.

Answer 2

Nie trzeba używać dwóch elementów div. Domyślam się, że najprostszym rozwiązaniem jest tylko wprowadzenie animacji css do klasy "ng-hide-add-active", a nie do "ng-hide-add". Jak poniżej:

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