如何在angularjs中淡出消息

Question

<script> 
    function Ctrl($scope, $window, $timeout) { 
    $scope.greeting = 'Hello, World!'; 
    $scope.showGreeting = false; 
    $scope.doGreeting = function() { 
     $scope.msg="hi"; 
     $scope.showGreeting = true; 
     $timeout(function(){ 
      $scope.showGreeting = false; 
     }, 10000); 
    }; 
    } 
</script> 
<div ng-controller="Ctrl"> 
    <input type="text" ng-model="greeting" /> 
    <button ng-click="doGreeting()">click</button> 
    <span ng-show="showGreeting ">{{msg}}</span> 
</div> 

此代碼顯示一條消息，當用戶單擊該按鈕10秒鐘然後隱藏時。這裏的消息隱藏得很快。我想讓它慢慢隱藏起來（就像jquery中的淡出）。請問我可以幫助我如何在angularJS中實現這一點。

Answer 1

我使用這個模塊（https://github.com/marcorinck/angular-growl）爲我的消息可以淡出，也許你可以嘗試。

Answer 2

檢出ngAnimate。嘗試添加到您的CSS，並將ngAnimate注入到您的模塊。

span.ng-leave.ng-leave-active { 
    opacity: 0; 
} 

Answer 3

嘗試angularStrap警報。

AngularStrap

希望這將幫助你！