如何獲得新的ng-repeat元素以在添加時爲背景顏色添加動畫效果？

如何獲取添加到ng-repeat中的新元素以爲背景顏色設置動畫效果？但是，我不希望現有的加載頁面的元素進行動畫製作。只有按鈕點擊事件時添加的那些。如何獲得新的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

來源

2017-09-20 RichC

可以使用角動畫類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

來源

2017-09-20 17:04:57

是的，你是對的 - 這很容易，但我怎麼能得到最初（已經創建）的領域從淡入。我只希望明確添加新的領域淡入。 – RichC

您可以聲明您的字段是對象而不是字符串。然後你可以使用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] 
});

來源

2017-09-20 15:37:53

這兩個答案符合該法案，但我與這一個簡單去和我使用的字符串的演示，但我的數組真的物體已經這樣工作很好。謝謝！ – RichC

@RichC你必須改變你的模型數據，並添加一個巨大的醜陋的ng類，這將會對消化過程產生額外的檢查，我的答案是改變一些css行，就像angularjs告訴你做的那樣你稱之爲簡單？你可以說這個解決方案更好地解決了你的問題，或者它更適合你的設計，甚至更容易使用這種方法（但我不知道如何），但是你不能簡單地稱它爲簡單的東西。 *免責聲明：我不是說這個答案不能解決問題，它只是不是更好的方法。* –

公平點 - 我的想法很膚淺，只是查看代碼，因爲我還沒有實現任何東西，但是在完成我的更改後，我會圍繞此回顧一下。 – RichC

如何獲得新的ng-repeat元素以在添加時爲背景顏色添加動畫效果？

回答

相關問題