7

angular2 でページ遷移アニメーションを作成するには?

これはコードですが、機能していません

@Component({
   selector:'myPagefirstPage', 
})

@View({
   template: `<div  class="view-animate ng-animate" > 
                 <h1>First Page</h1>
              </div>`

そして、アニメーションクラスをこのようなcssファイルに入れました

.view-animate.ng-enter {....}

しかし、うまくいきません

4

5 に答える 5

4

2015 年 12 月の時点で、アニメーションは Angular 2 ベータ リリースに実装されておらず、最終リリースで実装される予定です。

http://angularjs.blogspot.com.au/2015/12/angular-2-beta.html

次はなにかな？

Angular 2 を完全な最終リリースに移行するための一連の改善に、すでに熱心に取り組んでいます。多くの小さな改善を行いますが、最終的な大きな改善は次のとおりです。

  1. Angular 2 のペイロード サイズを縮小します。
  2. Angular CLI を開発プロセス全体でエンド ツー エンドで使用できるようにします。
  3. コンポーネント ルーター用の、より開発者にとって使いやすいルート定義とリンク API を作成します。
  4. アニメーションのサポート。
  5. I18n および L10n のサポート。

編集: アニメーションが追加されました - http://angularjs.blogspot.com.au/2016/06/rc2-now-available.html

RC2 が利用可能になりました

本日、Angular 2.0.0-rc2 の出荷を発表できることをうれしく思います。

このリリースには以下が含まれます。

  1. アニメーション フレームワーク

...

于 2016-01-25T05:27:24.703 に答える
3

div少なくとも Angular 2.0.0-rc2 を使用している場合は、次のようにコンポーネント ビューをラップする を追加することで、コンポーネント間にトランジション アニメーション (fadeIn など) を追加できます。

<div @fadeIn="'in'">
       ... Component HTML ...
</div>

コンポーネントでは、アニメーションを設定する必要がありますfadeIn。

@Component({
    ...
    animations: [
        trigger('fadeIn', [
            state('*', style({'opacity': '0'})),
            transition('* => in', [animate('800ms linear', style({'opacity': '1'}))])
        ])
    ]

[編集]状態を使用しない別の方法は次のとおりです。

<div @fadeIn>
       ... Component HTML ...
</div>

そしてコンポーネント：

@Component({
    ...
    animations: [
        trigger('fadeIn', [
            state('*', style({'opacity': 1})),
            transition('void => *', [
                style({'opacity': 0}),
                animate('800ms linear')
            ])
        ])
    ]
于 2016-08-23T09:30:40.657 に答える
1

Angular 2 の最終的な解決策

@JeanMel が述べたように、@routeAnimation組み込みディレクティブを使用してこれを実現できます。プランクを含む私の答えはこちらをご覧ください。

于 2016-10-17T00:54:54.970 に答える
0

ページ遷移については、routeAnimation

Animations.ts

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

export default [
  trigger('routeAnimation', [
    state('*', style({opacity: 1, height: '100%'})),
    transition('void => *', [
      style({opacity: 0, height: '100%'}),
      animate(200)
    ]),
    transition('* => void', animate(0, style({opacity: 0, height: '100%'})))
  ])
];

次に、あなたのYourComponent.ts

import animations from './Animations';
@Component({
  ...
  animations: animations
})
export class YourComponent {
  @HostBinding('@routeAnimation') public routeAnimation:void;
  ...
}

オプション: これは、ファイルが次のようになっていることを前提としていrouting.tsます

import {RouterModule}  from '@angular/router';
import {ModuleWithProviders} from '@angular/core';
import {YourComponent} from './YourComponent';

export const routing:ModuleWithProviders = RouterModule.forChild([
  {path: "aPath", component: YourComponent}
]);
于 2016-09-11T09:40:49.797 に答える