ng-repeat 中的淡入

Question

我有下面显示日志条目的标记。当用户执行操作时，我会在日志中添加一个条目，如下所示：logs.push(log).

 <div ng-repeat="log in logs track by $index">
        <div class="logEntry">
           {{log.text}}
        </div>
    </div>

这很好用，但是我想在条目出现在 UI 上时添加效果。我尝试使用 jQuery $(".logEntry").fadeIn(); 但这不起作用，可能是因为我将它与 ng-repeat 混合使用。任何想法如何做到这一点？ jQuery 或 AngularJS 动画。

Answer 1

您可以使用 ngAnimate，请记住这是您需要添加的依赖项：

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

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="log in logs" class="logEntry">
    <div>
       {{log}}
    </div>
</div>
<button ng-click="addLog();">Add log</button>

Ctrl:

function MyCtrl($scope) {
    var count = 1;
    $scope.logs = ["log " + count++];

    $scope.addLog = function () {
        $scope.logs.push("log " + count++);
    }

}

CSS:

 .logEntry.ng-enter 
  {
      -webkit-transition: 1s;
      transition: 1s;
      opacity:0;
  }
  .logEntry.ng-enter-active 
  {
      opacity:1;
  }


  .logEntry.ng-leave 
  {
      -webkit-transition: 1s;
      transition: 2s;
  }
  .logEntry.ng-leave-active 
  {
      opacity:0;
  }

Fiddle

Answer 2

你正在使用 jquery 动画，如果你想应用这个动画你必须调用

angular 应用效果后手动摘要循环...为此你可以使用

 $scope.apply() function.

否则使用ng-Animate...它是动画的不错选择

ng-repeat 中的淡入

FadeIn in ng-repeat

jquery

angularjs

angularjs-ng-repeat