web-dev-qa-db-ja.com

Angularアニメーション：スタイル `position：absolute`のないページ遷移？

目的：あるページから別のページにクリックしたときに素敵な移行効果を追加したい

私はオンラインを含む多くのソリューションを試しました：

共通点の1つは、それらすべてにposition: absoluteまたはposition: fixedのようなスタイルが追加されているため、既存のアプリのレイアウトが壊れていることです。

Angular 1を使用する場合、position: absoluteを<div ui-view><div>に追加する必要はありません。

Angular 2または4で可能ですか？

angularanimationtransitionangular4
17
Alex G

退出するアニメーションのみに絶対配置を追加できます。

transition(':enter', [          
    style({transform: 'translateX(100%)'}),    
    animate('0.3s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [          
    style({transform: 'translateX(0%)', position: 'absolute', left: 0, right: 0, top: 0}),    
    animate('0.3s ease-in-out', style({transform: 'translateX(-100%)'}))
])

したがって、退出ルートのみが絶対的に配置され、進入ルートは静的に配置されます。

機能しない場合は、ルーターコンセントが位置によってラップされていることを確認してください。

<div style="position: relative;">
  <router-outlet></router-outlet>
</div>

そしてあなたのルートコンポーネントが表示していること：ブロック

@Component({
  styles:[':Host {display: block;}']
4
Martin Cremer

Angularバージョン4.3.xについて話します。routerdocumentation を読んで、ルート間にアニメーションを追加する方法を説明します。遅延の履歴書は次のとおりですもの（自分を含む）。

@angular/core（@angular/animationsではなく）からアニメーションライブラリをインポートする場合：

import {
  AnimationEntryMetadata,
  animate,
  state,
  style,
  trigger
} from '@angular/core';

export const fadeInAnimation: AnimationEntryMetadata = trigger('fadeInAnimation', [
  transition(':enter', [
    style({
      opacity: 0,
      transform: 'translateY(20px)'
    }),
    animate(
      '.3s',
      style({
        opacity: 1,
        transform: 'translateY(0)'
      })
    )
  ])
]);

次に、コンポーネントでHostBindingデコレーターを使用して、コンポーネントのレイアウトのcssプロパティを指定します（fixedまたはabsoluteの位置を使用する必要はありません）。

import { Component, OnInit, HostBinding } from '@angular/core';

import { fadeInAnimation } from './../animations/fadein';

@Component({
  animations: [fadeInAnimation],
  selector: 'app-posts',
  templateUrl: './posts.component.html'
})
export class DemandsComponent implements OnInit {
  @HostBinding('@fadeInAnimation') fadeInAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'relative';

  // Rest of the code
}

ルーティングされた各コンポーネントにこれを追加するのは面倒な場合があります。ドキュメントが示唆し、私は引用します：

個々のコンポーネントにルートアニメーションを適用することは簡単なデモで機能しますが、実際のアプリでは、ルートパスに基づいてルートをアニメーション化する方が適切です。

MatiasNiemeläのこの記事は役に立ちます https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#routable-animations

3
lkartono