

Angularにて下記のようなHTMLとコンポーネントを用意しています。  
IconInfoクラスではiconとicon名を持っています。

画面からボタンを押されると、addIconInfoが呼ばれるようになっており、  
ボタンが押されるたびに画面にiconが追加されています。

そこでなのですが、iconが追加される際にアイコンが表示される領域の  
一番下から徐々に上に上がっていくように（上にたまっていくように）  
したいのですが、何か方法はありますでしょうか？  
ngForだけでは難しいでしょうか？

◆HTML

[code]

    <div class="page">
      <section class="card">
    　　<ng-container *ngFor="let icon of icons">
    　　　<div class="media">
      　　　<img src={{icon.img}}>
    　　　</div>
    　　</ng-container>
      </section>
    </div>
    
[/code]

◆コンポーネント.ts

[code]

      addIconInfo(icon: string, name: string) {
         this.icons.push(new IconInfo(icon, name));
      }
    
[/code]


CC BY-SA 3.0
2018-03-08T13:58:33.487
42238
2018-03-09T01:32:40.617
12842
question
angular4
Angularで画面に追加したアイコンをスムーズに動かしたい


`this.icons`がどういったものかわかりませんが、単純に`Array`であるならば`push`による末尾への追加ではなく、`unshift`で先頭に追加していくことで期待の動作になると思います。

[code]

    this.icons.unshift(new IconInfo(icon, name));
    
[/code]


CC BY-SA 3.0
2018-03-09T01:32:40.617
42245
2018-03-09T01:32:40.617
20272
42238
answer