web-dev-qa-db-ja.com

アニメーションをAngular2の外部ファイルに移動できますか？

@Componentアノテーションは、animationsプロパティを提供します。これを使用して、それぞれが多くのtriggersおよびstateプロパティを持つtransitionのリストを定義できます。

コンポーネントに複数のアニメーションを追加すると、このリストはかなり長くなる可能性があります。また、一部のアニメーションは、他のコンポーネントでも使用すると非常に便利です。それらを各コンポーネントに直接配置する必要があるのは面倒で反復的です-さらに、DRYの原則に違反します。

コンポーネントでテンプレートとスタイルのプロパティを定義することもできますが、ここでは、代わりにtemplateUrlとstyleUrlsを提供するオプションがあります。 animationUrlsプロパティが見つからないようです-何かが足りませんか？これを行う方法はありますか？

angularangular2-animation
17
Per Hornshøj-Schierbeck

できますよ。別のファイルでアニメーションを宣言し、必要な場所にインポートするだけです。

animations.ts

export const animation = trigger(...)

component.ts

import { animation } from './animations'

@Component({
  animations: [ animation ]
})

または、構成可能にしたい場合は、関数をエクスポートできます。たとえば、 Fuel-UICollapse を見てください。これは再利用可能な（そして構成可能な）アニメーションです

崩壊.ts

export function Collapse(duration: number = 300) {
    return trigger('collapse', [
           ...
        ])
}

次に、コンポーネントで、

import { Collapse } from './collapse'

@Component({
  animations: [ Collapse(300) ],
  template: `
    <div @collapse="collapsed ? 'true' : 'false'">
    </div>
  `
})
class MyComponent {}
32
Paul Samsotha

確かにそれは可能です。たとえば、animations.tsを作成して、あらゆる種類のアニメーション定数をエクスポートさせることができます。

export const PRETTY_ANIMATION = trigger('heroState', [
  state('inactive', style({
    backgroundColor: '#eee',
    transform: 'scale(1)'
  })),
  state('active',   style({
    backgroundColor: '#cfd8dc',
    transform: 'scale(1.1)'
  })),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out'))
])

コンポーネントでは、importステートメントを使用してこのアニメーションをインポートできます。

import {PRETTY_ANIMATION} from 'animations';

コンポーネントに適用します。

@Component({
    selector : `...`
    animations : [PRETTY_ANIMATION]
})
4
PierreDuc

あなたと紳士は確かに彼のgithubリポジトリの例のいくつかでそうしました。次のようにします。

route_animations.ts

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

var startingStyles = (styles) => {
    styles['position'] = 'fixed';
    styles['top'] = 0;
    styles['left'] = 0;
    styles['right'] = 0;
    styles['height'] = '100%';
    return styles;
}

export default function(name) {
    return trigger(name, [
        transition('void => *', [
            style(startingStyles({
                transform: 'translateX(100%)'
            })),
            animate('0.5s ease-out', style({ transform: 'translateX(0%)'}))
        ]),
        transition('* => void', [
            style(startingStyles({
                transform: 'translateX(0%)'
            })),
            animate('0.5s ease-in', style({ transform: 'translateX(-100%)'}))
        ])
    ]);
}

次に、次のようなコンポーネントにインポートされます。

import {default as routerAnimations} from '../route_animations';

そして、コンポーネントを初期化するときに、アニメーションParamの下で次のように呼び出されます。

animations: [routerAnimations('route')],

より良いアイデアを得るためにこれを自分で見てください、しかし私はこれが役立つことを願っています。 https://github.com/matsko/ng2eu-2016-code/blob/master

Matskoへの称賛。

1
Nige

これは、アニメーションのフェードインの別の例ですAngular 4ルートのアニメーション化に使用します

// import the required animation functions from the angular animations module
import { trigger, state, animate, transition, style } from '@angular/animations';
 
export const fadeInAnimation =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('fadeInAnimation', [
 
        // route 'enter' transition
        transition(':enter', [
 
            // css styles at start of transition
            style({ opacity: 0 }),
 
            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);

そして、トランジションが添付されたコンポーネント

import { Component } from '@angular/core';
 
// import fade in animation
import { fadeInAnimation } from '../_animations/index';
 
@Component({
    moduleId: module.id.toString(),
    templateUrl: 'home.component.html',
 
    // make fade in animation available to this component
    animations: [fadeInAnimation],
 
    // attach the fade in animation to the Host (root) element of this component
    Host: { '[@fadeInAnimation]': '' }
})
 
export class HomeComponent {
}

詳細とライブデモ この投稿

1
Jason