添加后，如何获取新的ng-repeat元素以使背景色动起来？

Question

我如何才能将新元素添加到ng-repeat中以动画背景色？ 但是，我不希望在页面上加载的现有元素具有动画效果。 仅在按钮单击事件时添加的那些。

Index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="app">
      <main-component></main-component> 
    </div>
  </body>

</html>

Script.js

console.clear();

function mainController() {
  var model = this;
  model.fields = [];
  model.fields.push("field1");
  model.fields.push("field2");

  model.addField = function(label) {
    console.log(label);
    model.fields.push(label);
  }
}

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

app.component("mainComponent", {
  template: `
    <button ng-click="model.addField('New Field')">Add Field</button><br /><br />
    <div class="field-container fadein" ng-repeat='f in model.fields track by $index'>{{f}}</div>
  `,
  controllerAs: "model",
  controller: [mainController]
});

styles.css

/* Styles go here */
.field-container {
  width: 200px;
  height: 80px;
  border: 1px solid black;
  background-color: yellow;
}

.fadein {
  background-color: white;
  transition: background-color 1000ms linear;
}

这是pl子

Answer 1

您可以将字段声明为对象而不是字符串。 然后，您可以使用fadein属性。 通过单击按钮添加新字段时，将此属性设置为true。 然后，您可以使用ng-class有条件地将样式应用于新的字段对象。

function mainController() {
  var model = this;
  model.fields = [];
  model.fields.push({name: "field1", fadein: false}); // Made field an object
  model.fields.push({name: "field2", fadein: false}); // Made field an object

  model.addField = function(label) {
    console.log(label);
    var field = {name: label, fadein: true}; // Make fadein true when we add the new field
    model.fields.push(field);
  }
}

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

app.component("mainComponent", {
  template: `
    <button ng-click="model.addField('New Field')">Add Field</button><br /><br />
    <!--- ADDED NG-CLASS for determining fadein. Changed {{f}} to {{f.name}} --->
    <div class="field-container" ng-repeat='f in model.fields track by $index' ng-class="{'fadein': f.fadein == true}" >{{f.name}}</div>`,
  controllerAs: "model",
  controller: [mainController]
});

Answer 2

您可以将angular-animate类用于ng-repeat添加新项（即ng-enter ）。

首先，您必须设置组件的初始状态：

.field-container {
  background-color: yellow;
  transition: background-color 1000ms linear;
}

然后配置添加项时的行为，添加项时将具有此状态，并在几毫秒内回滚到初始状态：

.field-container.ng-enter {
  background-color: white;
}

基本上，当刚刚添加该项目时，该项目将添加ng-enter类，然后css将颜色设置为white 。 稍后，将删除该类，并且css将由于过渡而将状态恢复为yellow但处于平稳transition: background-color 1000ms linear; 组态。

这是我从你的骗子那里拿来的工作提琴。

 var app = angular.module('app', ['ngAnimate']); app.component("mainComponent", { template: ` <button ng-click="model.addField('New Field')">Add Field</button><br /><br /> <div class="field-container fadein" ng-repeat='f in model.fields track by $index'> {{f}} </div> `, controllerAs: "model", controller: [mainController] }); function mainController() { var model = this; model.fields = []; model.fields.push("field1"); model.fields.push("field2"); model.addField = function(label) { console.log(label); model.fields.push(label); } } 

 .field-container { width: 200px; height: 40px; border: 1px solid black; background-color: yellow; transition: background-color 1000ms linear; } .field-container.ng-enter { background-color: white; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script> <div ng-app="app"> <main-component></main-component> </div> 

参考： ngRepeat动画