Hình ảnh động không hoạt động chính xác khi chạy lần đầu tiên khi phần tử bị ẩn

Question

Tôi đang cố định thanh trạng thái trên ứng dụng góc của mình, mục đích là khi yêu cầu được thực hiện tới máy chủ, thanh sẽ hiển thị thông báo phản hồi, sẽ có màu nền để biểu thị thành công hoặc lỗi, và nếu nó đã thành công để ẩn sau một vài giây.

Điều tôi thấy là lần đầu tiên logic này chạy qua sau khi tải trang hoạt ảnh không chạy (cả mờ dần và mờ dần thời gian không chạy), nhưng chỉ khi yếu tố thanh trạng thái ban đầu bị ẩn , nếu tôi đặt biến ng-show thành true khi tải trang, tất cả hoạt ảnh sẽ hoạt động như mong đợi.

Tôi đã kiểm tra nguồn thông qua các công cụ dành cho nhà phát triển của Chrome và trong lần chạy đầu tiên div có các lớp này alert-bar ng-hide-remove ng-hide-remove-active alert-bar-success ng-animate ng-hide sau khi hoạt ảnh phải được hoàn tất. Khi hoạt ảnh hoạt động, các lớp duy nhất hiện diện là 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; 
} 

Controller:

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

Điều này xảy ra do tương tác giữa các mã hoạt hình áp dụng cho cả ng-class và ng-hide chỉ thị. Cách duy nhất tôi đã thực hiện những việc như công việc này là sử dụng các phần tử <div> riêng biệt được hiển thị/ẩn theo điều kiện nhưng có các lớp tĩnh.

Đây là một plunkr thể hiện tách trên vào hai <div> yếu tố để tạo ra một ví dụ làm việc cho các vấn đề trong câu hỏi:

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

Ngoài ra, bạn có thể từ bỏ việc sử dụng các ng-hide/ng-show hoàn toàn và chỉ sử dụng ng-class.

Chỉnh sửa: xem http://plnkr.co/edit/JiLPc6cqiLHR21c64cCy?p=preview cho phiên bản chỉ sử dụng ng-class riêng.

Answer 2

Bạn không cần sử dụng hai div. Tôi đoán giải pháp đơn giản nhất là chỉ đặt animate css vào lớp "ng-hide-add-active", chứ không phải vào "ng-hide-add". Giống như bên dưới:

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