web-dev-qa-db-ja.com

Angular 4アニメーションはパラメータを追加します

これが私が作ったランダムなアニメーションです

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

    export const customAnimation=
        trigger('customAnimation', [
            transition(':leave', [
                style({position: 'relative'}),
                animate("250ms ease-in", keyframes([
                    style({top: 0}),
                    style({top: -300}),
                ]))
            ])
        ])
_

次に、それをコンポーネントにインポートします。 （_animations: [customAnimation]_）ただし、新しい引数機能を使用したい：（ http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an -improved-version-for-animation-package / ）。

たとえば、-300はパラメータになり、次のようにしてテンプレート要素で呼び出します。

_<div [@customAnimation]="{pixels: -300}">
_

特定のdom要素で使用したいのでanimation()とuseAnimation()を使用したくないので（query()も使用しない）、単に使用しませんでした。それをどうにかして。

編集：

うまくいきました：

_export const leavingTowardsTop=
    trigger('leavingTowardsTop', [
        transition(':leave', [
            style({position: 'relative'}),
            animate("250ms ease-in", keyframes([
                style({top: 0}),
                style({top: "{{pixels}}"})
            ]))
        ], {params : { pixels: "-30px" }})
    ])
_

唯一の問題は、デフォルト（-30）以外の値を指定できないことです。私は試した ：

_[@leavingTowardsTop]="{params : { pixels: '-300px' }}"
_

そして

_[@leavingTowardsTop]="{ pixels: '-300px' }"
_

_'_またはpxを指定しないように試みましたが、それでも30pxかかります

angularanimation
12
Scipion

ここに私が必要とした解決策があります

[@leavingTowardsTop]="{value: ':leave', params : {topPixels: '-300px'}}"
10
Scipion

topスタイルを次のようにパラメーター化する必要があります。

export const customAnimation=
    trigger('customAnimation', [
        transition(':leave', [
            animate("500ms ease-in", keyframes([
                style({'margin-top': "-{{pixels}}px", 'height': "{{pixels}}px", 'margin-bottom': "0px"}),
            ]))
        ], {params : { pixels: "30" }})
    ]);

次に、ビューで次のように呼び出します。

[@customAnimation]="{value: ':leave', params: { pixels: 100}}"

デモ

12
Teddy Sterne