TypeScript animations.animation函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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；未经允许，请勿转载。