Angular 带有淡入淡出表达式的 ng-show 不会删除 div

Question

我正在尝试显示一个 div，其中包含带有 ng-show 的错误消息以及 ng-class 设置为带有表达式的淡入淡出。消息在设置的时间后消失，但是，创建用于显示错误消息的 div 不会被删除。

我希望在消息消失时也删除创建的 div。有人可以帮忙吗？

这是我的代码笔 - link

这是我的 html

代码

  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" 
type="text/css" />    
    <section data-ng-app="app" class="container" data-ng-controller="messageController">    

        <hr />      

      <div data-ng-show="showError" ng-class="{fade:doFade}" class="alert alert-danger"><strong>Error:</strong> {{errorMessage}}</div>

      <button data-ng-click="fakeError()" class="btn btn-default">Fake an Error</button>
      <hr />      
    </section>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

和JS代码

var app = angular.module('app',[]);

app.controller('messageController', ['$scope', '$timeout', function($scope, $timeout){

  $scope.showError = false;
  $scope.doFade = false;

  $scope.fakeError = function(){

    //reset
    $scope.showError = false;
    $scope.doFade = false;

    $scope.showError = true;

    $scope.errorMessage = 'We\'re mixing apples and oranges!';

    $timeout(function(){
      $scope.doFade = true;
    }, 2500);
  };
}]);

Answer 1

ng-show 仅在条件下设置样式显示，因此您的 div 将始终出现在页面中，仅在条件为假时不可见。

使用 ng-if 来有条件地 add/remove 元素。

为 ng-if 设置动画的最简单方法是使用 angular-animate 库。使用此库，您将可以控制各种指令的渲染阶段。这些阶段通过特定的 css 类进行标记，您可以针对这些阶段并设置样式元素的过渡。

对于ng-if指令，有可用的类.ng-enter、。 ng-leave, .ng-enter-active, .ng-leave-active

通过这些类您可以定义所需的过渡，在您的情况下它是淡入淡出。

删除时淡化的示例： https://codepen.io/anon/pen/NzyqvL

Angular 带有淡入淡出表达式的 ng-show 不会删除 div

Angular ng-show with fade expression does not remove the div

javascript

fade

angularjs

ng-show