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

希望这会对你有帮助！

如何在angularjs中淡出消息

3 个答案: