Javascript 使用AngularJS而不是jQuery设置警报动画

我正在使用Codeigniter 3.1.8和AngularJS v1.7.8开发博客应用程序

帖子评论表通过AngularJS提交。表格如下：

<div class="comments-form" ng-controller="PostCommentController">
    <h3>Leave a comment</h3>
    <form name="commentForm" novalidate>
        <div class="row uniform">
            <div class="form-controll 6u 12u$(xsmall)">
                <input type="text" name="name" id="name" ng-model="newComment.name" placeholder="Name" ng-required="true" />
                <span class="error" ng-show="(commentForm.name.$touched && commentForm.name.$invalid) || (commentForm.$submitted && commentForm.name.$invalid)">This field can not be empty</span>
            </div>

            <div class="form-controll 6u$ 12u$(xsmall)">
                <input type="email" name="email" id="email" ng-model="newComment.email" placeholder="Email" ng-required="true" />
                <span class="error" ng-show="(commentForm.email.$touched && commentForm.email.$invalid) || (commentForm.$submitted && commentForm.email.$invalid)">Enter a valid email address</span>
            </div>

            <div class="form-controll 12u$">
                <textarea name="comment" rows="6" id="message" ng-model="newComment.comment" placeholder="Comment" ng-required="true"></textarea>
                <span class="error" ng-show="(commentForm.comment.$touched && commentForm.comment.$invalid) || (commentForm.$submitted && commentForm.comment.$invalid)">This field can not be empty</span>
            </div>

            <!-- Break -->
            <div class="12u$">
                <input type="submit" value="Add comment" ng-click="createComment()" class="button special fit" />
            </div>
        </div>
    </form>
    <div class="alert alert-success" ng-show="commentSubmitted == true">{{commentSuccessMsg}}</div>
</div>

我还没有找到AngularJS的方法来制作场景外表单警报的动画。我已经在前端动画中使用jQuery很长一段时间了，如果使用jQuery，我会这样做：

// Hide alerts
$('.alert:not(".alert-dismissible")').each(function(){
 $(this).delay(4000).slideUp(200);
});

---

除了这种解决方案，什么是简单而健壮的AngularJS呢？

在延迟后更改类，使用CSS制作幻灯片动画

---

我找到了一个解决方案，其中包括CSS

关键帧和AngularJS的
$timeout
：

CSS:

我已将AngularJS
$timeout
设置为
$scope.createComment
，用于延迟：

$scope.createComment = function() {
  if ($scope.newComment.name !== undefined && $scope.newComment.email !== undefined && $scope.newComment.comment !== undefined) {
    $http.post('api/comments/create/' + post_id, $scope.newComment)
      .then(() => {
        $scope.newComment = {};
        $scope.commentForm.$setPristine();
        $scope.commentForm.$setUntouched();
        $scope.commentSuccessMsg = "Your comment was submitted. It will be published after aproval";
        $scope.commentSubmitted = true;
        // this was added for the delay (3 seconds)
        $timeout(function() {
          $scope.fadeout = "fadeout";
        }, 3000);
      });
  }
};

警报div看起来是这样的：

<div class="alert alert-success {{fadeout}}" ng-show="commentSubmitted == true">{{commentSuccessMsg}}</div>

{{commentsuccesssg}

有一个工作演示
使用javascript只是为了添加一个类，您可以使用纯js来实现这一点，然后使用css转换/动画
$scope.createComment = function() {
  if ($scope.newComment.name !== undefined && $scope.newComment.email !== undefined && $scope.newComment.comment !== undefined) {
    $http.post('api/comments/create/' + post_id, $scope.newComment)
      .then(() => {
        $scope.newComment = {};
        $scope.commentForm.$setPristine();
        $scope.commentForm.$setUntouched();
        $scope.commentSuccessMsg = "Your comment was submitted. It will be published after aproval";
        $scope.commentSubmitted = true;
        // this was added for the delay (3 seconds)
        $timeout(function() {
          $scope.fadeout = "fadeout";
        }, 3000);
      });
  }
};

<div class="alert alert-success {{fadeout}}" ng-show="commentSubmitted == true">{{commentSuccessMsg}}</div>