151

CSSを使用して、angular 2で右からdivをスライドインしたい。

  <div class="note" [ngClass]="{'transition':show}" *ngIf="show">
    <p> Notes</p>
  </div>
  <button class="btn btn-default" (click)="toggle(show)">Toggle</button>

[ngClass] のみを使用してクラスを切り替え、不透明度を利用すると、うまく機能します。しかし、その要素を最初からレンダリングしたくないので、最初に ngIf で「非表示」にしますが、遷移は機能しません。

.transition{
  -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
  -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  margin-left: 1500px;
  width: 200px;
  opacity: 0;
}

.transition{
  opacity: 100;
  margin-left: 0;
}
4

7 に答える 7

169

最新のAngular 2ドキュメント によると、「Entering and Leaveing」要素をアニメーション化できます(angular 1のように)。

単純なフェード アニメーションの例:

関連する @Component に次を追加します。

animations: [
  trigger('fadeInOut', [
    transition(':enter', [   // :enter is alias to 'void => *'
      style({opacity:0}),
      animate(500, style({opacity:1})) 
    ]),
    transition(':leave', [   // :leave is alias to '* => void'
      animate(500, style({opacity:0})) 
    ])
  ])
]

インポートを追加することを忘れないでください

import {style, state, animate, transition, trigger} from '@angular/animations';

関連するコンポーネントの html の要素は次のようになります。

<div *ngIf="toggle" [@fadeInOut]>element</div>

ここでは、スライドとフェード アニメーション の例を作成しました。

「void」と「*」の説明:

  • voidngIfがfalse に設定されている場合の状態です (要素がビューにアタッチされていない場合に適用されます)。
  • *- 多くのアニメーション状態が存在する可能性があります (詳細はドキュメントを参照)。状態は*、「ワイルドカード」としてそれらすべてよりも優先されます (私の例では、これはが にngIf設定されているときの状態ですtrue)。

通知(Angular ドキュメントから取得):

アプリモジュール内で 余分に宣言し、import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Angular アニメーションは、標準の Web Animations API の上に構築され、それをサポートするブラウザーでネイティブに実行されます。他のブラウザでは、ポリフィルが必要です。GitHub から web-animations.min.js を取得し、ページに追加します。

于 2016-09-06T19:04:52.057 に答える
20 
    trigger('slideIn', [
      state('*', style({ 'overflow-y': 'hidden' })),
      state('void', style({ 'overflow-y': 'hidden' })),
      transition('* => void', [
        style({ height: '*' }),
        animate(250, style({ height: 0 }))
      ]),
      transition('void => *', [
        style({ height: '0' }),
        animate(250, style({ height: '*' }))
      ])
    ])
于 2017-02-06T14:54:11.783 に答える