新しい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-enter）を追加ng-repeat用アンギュラアニメーションクラスを使用することができます。

はその後

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

アイテムが追加されたとき、それはそれはちょうど追加されます場合は、この状態を持っているだろうとにロールバックされます動作を設定：

まずあなたはセットアップにコンポーネントの初期状態を持っています数ミリ秒で、初期状態：項目がちょうど追加されたときに

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

基本的には、アイテムはng-enterクラスがwhiteに、その後cssセット色が追加されます。その後、クラスは削除され、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>

のRef .: 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

どちらの答えがぴったり合うが、私は簡単にするために、この1と一緒に行くんだと私はデモのための文字列を使用しますが、私の配列があります実際にオブジェクトが既に存在するので、これは素晴らしいです。ありがとう！ – RichC

@RichCあなたはあなたのモデルデータを変更し、消化プロセスのための余分なチェックを生成する醜いngクラスを追加しなければなりませんでした。そして、私の答えは全て、angularjsがあなたに指示する方法あなたはこの単純さと呼んでいますか？あなたはこの問題をどうにかして解決するか、それともあなたの設計に合っていると言うことができますか、このアプローチを使うのは簡単ではありませんでした（私にはわかりませんが）。 *免責事項：私はこの答えが問題を解決しないと言っているわけではありません、それはより良いアプローチではありません。* –

公正なポイント - まだ何も実装していないので、私の考えはちょうどコードを調べるだけでは足りませんでしたが、変更を完了した後でこれを回り回ります。 – RichC

新しいng-repeat要素を追加すると背景色をアニメーション化する方法は？

答えて

関連する問題