TypeScript animations.animation函數代碼示例

本文整理匯總了TypeScript中@angular/animations.animation函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript animation函數的具體用法？TypeScript animation怎麽用？TypeScript animation使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。

在下文中一共展示了animation函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: animation

const baseParams: IAnimationParams = {
    delay: "0s",
    direction: "X",
    duration: "800ms",
    easing: EaseInOut.quad,
    endAngle: 0,
    endDistance: "8px",
    startAngle: 0,
    startDistance: "10px",
    xPos: "center",
    yPos: "center"
};

const shakeHor: AnimationReferenceMetadata = animation(baseRecipe, {
    params: {
        ...baseParams,
        direction: "X"
    }
});

const shakeVer: AnimationReferenceMetadata = animation(baseRecipe, {
    params: {
        ...baseParams,
        direction: "Y"
    }
});

const shakeTop: AnimationReferenceMetadata = animation(baseRecipe, {
    params: {
        ...baseParams,
        endAngle: 2,
        endDistance: "0",

開發者ID:dkamburov，項目名稱:igniteui-angular，代碼行數:32，代碼來源:shake.ts

示例2: style

        `{{duration}} {{delay}} {{easing}}`,
        style({
            opacity: `{{endOpacity}}`
        })
    )
];

const baseParams: IAnimationParams = {
    delay: '0s',
    duration: '350ms',
    easing: EaseOut.sine,
    endOpacity: 1,
    startOpacity: 0
};

const fadeIn: AnimationReferenceMetadata = animation(base, {
    params: baseParams
});

const fadeOut: AnimationReferenceMetadata = animation(base, {
    params: {
        delay: '0s',
        duration: '350ms',
        easing: EaseOut.sine,
        endOpacity: 0,
        startOpacity: 1
    }
});

export { fadeIn, fadeOut };

開發者ID:IgniteUI，項目名稱:igniteui-angular，代碼行數:30，代碼來源:index.ts

示例3: animation

    fromPosition: 'translateY(-500px)',
    startOpacity: 0,
    toPosition: 'translateY(0)'
};

const baseOutParams: IAnimationParams = {
    delay: '0s',
    duration: '350ms',
    easing: EaseIn.quad,
    endOpacity: 0,
    fromPosition: 'translateY(0)',
    startOpacity: 1,
    toPosition: 'translateY(-500px)'
};

const slideInTop: AnimationReferenceMetadata = animation(base, { params: baseInParams });

const slideInLeft: AnimationReferenceMetadata = animation(base,
    {
        params: {
            delay: '0s',
            duration: '350ms',
            easing: EaseOut.quad,
            endOpacity: 1,
            fromPosition: 'translateX(-500px)',
            startOpacity: 0,
            toPosition: 'translateY(0)'
        }
    }
);

開發者ID:IgniteUI，項目名稱:igniteui-angular，代碼行數:30，代碼來源:index.ts

示例4: animation

import {animate, animation, style, transition, trigger, useAnimation} from '@angular/animations';
export const fadeIn = animation(
  [
    style({
      opacity: '{{start}}'
    }),
    animate('{{duration}}',
      style({
        opacity: '{{end}}'
      })
    )
  ],
  {
    params: {
      start: '0',
      duration: '280ms',
      end: '1'
    }
  }
);
export const fadeout = animation(
  [
    style({
      opacity: '{{start}}'
    }),
    animate('{{duration}}',
      style({
        opacity: '{{end}}'
      })
    )
  ],

開發者ID:tellxp，項目名稱:avengers，代碼行數:31，代碼來源:fade-animations.ts

示例5: animation

        ])
    )
];

const blinkParams: IAnimationParams = {
    delay: '0s',
    duration: '.8s',
    easing: 'ease-in-out',
    fromScale: .2,
    midScale: 1.2,
    toScale: 2.2
};

const pulsateFwd = animation(pulsateBase, {
    params: {
        ...pulsateParams
    }
});

const pulsateBck = animation(pulsateBase, {
    params: {
        ...pulsateParams,
        toScale: .9
    }
});

const heartbeat = animation(heartbeatBase, {
    params: {
        ...heartbeatParams
    }
});

開發者ID:IgniteUI，項目名稱:igniteui-angular，代碼行數:31，代碼來源:pulsate.ts

示例6: animation

export const to = {
  left:  { params: { to: 'translateX(-100%)'}},
  right:  { params: { to: 'translateX(100%)'}},
  up: { params: { to: 'translateY(-100%)' }},
  down: { params: { to: 'translateY(100%)' }},
};

export const from = {
  left:  { params: { from: 'translateX(-100%)'}},
  right:  { params: { from: 'translateX(100%)'}},
  up: { params: { from: 'translateY(-100%)' }},
  down: { params: { from: 'translateY(100%)' }},
};

export const fade = animation([
  style({ opacity: '{{from}}' }),
  animate('{{ time }}', style({ opacity: '{{to}}' }))
], {params: { time: defaultTime }});

export const fadeIn = useAnimation(fade,  { params: { from: 0, to: 1 }});
export const fadeOut = useAnimation(fade, { params: { from: 1, to: 0 }});

export const slide = animation([
  style({ transform: '{{from}}'}),
  animate('{{ time }}', style({ transform: '{{to}}' })),
], {params: { time: defaultTime, to: '*', from: '*' }});


export const duration = animation(
  animate('{{ time }}'), {params: { time: defaultTime }}
);

開發者ID:jon-r，項目名稱:wp_angular，代碼行數:31，代碼來源:animations.ts

示例7: animation

    startOpacity: 0,
    toScale: 1,
    xPos: "50%",
    yPos: "50%"
};

const baseOutParams: IAnimationParams = {
    ...baseInParams,
    easing: EaseOut.sine,
    endOpacity: 0,
    fromScale: 1,
    startOpacity: 1,
    toScale: .5
};

const scaleInCenter: AnimationReferenceMetadata = animation(base, { params: baseInParams });

const scaleInBl: AnimationReferenceMetadata = animation(base,
    {
        params: {
            ...baseInParams,
            xPos: "0",
            yPos: "100%"
        }
    }
);

const scaleInVerCenter: AnimationReferenceMetadata = animation(base,
    {
        params: {
            ...baseInParams,

開發者ID:dkamburov，項目名稱:igniteui-angular，代碼行數:31，代碼來源:index.ts

示例8: animation

import {animate, animation, style, transition, trigger, useAnimation} from '@angular/animations';

export const expandIn = animation(
  [
    style({
      height: '{{start}}',
      overflow: 'hidden'
    }),
    animate('{{duration}}',
      style({
        height: '{{end}}'
      })
    )
  ],
  {
    params: {
      start: '0',
      duration: '280ms',
      end: '*'
    }
  }
);
export const expandOut = animation(
  [
    style({
      height: '{{start}}',
      overflow: 'hidden'
    }),
    animate('{{duration}}',
      style({
        height: '{{end}}'

開發者ID:tellxp，項目名稱:avengers，代碼行數:31，代碼來源:expand-animations.ts

示例9: animation

import {animate, animation, style, transition, trigger, useAnimation} from '@angular/animations';
export const scaleIn = animation(
  [
    style({
      transform: '{{start}}',
    }),
    animate('{{duration}}',
      style({
        transform: '{{end}}'
      })
    )
  ],
  {
    params: {
      start: 'scale(0)',
      duration: '280ms',
      end: 'scale(1)'
    }
  }
);
export const scaleOut = animation(
  [
    style({
      transform: '{{start}}',
    }),
    animate('{{duration}}',
      style({
        transform: '{{end}}'
      })
    )
  ],

開發者ID:tellxp，項目名稱:avengers，代碼行數:31，代碼來源:scale-animations.ts

示例10: animation

import {
  trigger,
  style,
  animate,
  transition, animation, useAnimation
} from '@angular/animations';

const enterAnimationProps = animation([
  style({opacity: 0}),
  animate('{{ duration }}')
], {params: {duration: '500ms'}});

const leaveAnimationProps = animation([
  animate('{{ duration }}',
    style({opacity: 0}))
], {params: {duration: '500ms'}});

export function fadeAnimationTrigger(params) {
  return trigger('fadeAnimation', [
    transition(':enter',
      useAnimation(enterAnimationProps, {params: params})),
    transition(':leave',
      useAnimation(leaveAnimationProps, {params: params}))
  ]);
}

開發者ID:brunotestahy，項目名稱:bruno-games，代碼行數:25，代碼來源:fade-animation.ts

注：本文中的@angular/animations.animation函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。