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;
}

Here's the plunker

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

您可以使用角度动画类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;配置而平稳过渡。

这是我从your plunkr获得的一个工作小提琴。

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 Animations

如何在添加新的ng-repeat元素时为背景颜色设置动画？

2 个答案: