angular - ルーティングされたコンポーネントのAngular 2「アニメーションのスライド」

Question

2 つのルーティングされたコンポーネントと、それらをルーティングするための固定ナビゲーション バーに 2 つの Routerlinks があるとします。Routerlinks をクリックすると、右からスライドインするようにします。

コンポーネントを css でオフセットしたり、タイムアウト関数を使用して css クラスを変更したりしたくありません (ngStyle や ngClass などを使用)。

Angular 2でそれを達成するためのよりエレガントな方法はありますか?

ありがとう！

Answer 1

スライドするという点では、非常に簡単です。

Angular 2 Animateの公式ドキュメント を参照できます。

新しいルーター v3 を使用して、単純なショーケース用に作成したこのPlunkerも確認できます。

トリガーされた要素がビューから破棄されようとしているときに、実際に leave/exit/void トランジションを行う方法を理解するのに苦労していることに注意してください。

Angular 2 Animateで別のスレッドを開きました- ルート/コンポーネントを変更するときに「* => void」トランジションの目に見える効果はありません。

@Component({
  selector: 'home',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <div @flyInOut="'active'" class="radibre">
  </div>
  `,
  styles: ['.radibre { width: 200px; height: 100px; background: red; }'],
  animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]
})

export class Home {
  constructor() { }
}

@Component({
  selector: 'page',
  template: `
  <div @testingBottom="'active'" class="page"></div>`,
  styles: ['.page { width: 300px; height: 50px; background: green; }'],
  animations: [
    trigger('testingBottom', [
      state('active', style({transform: 'scale(1)'})),
      transition('void => *', [
        style({transform: 'scale(0)'}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({transform: 'scale(0)'}))
      ])
    ])
  ]
})