TypeScript animations.useAnimation函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

本文整理汇总了TypeScript中@angular/animations.useAnimation函数的典型用法代码示例。如果您正苦于以下问题：TypeScript useAnimation函数的具体用法？TypeScript useAnimation怎么用？TypeScript useAnimation使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了useAnimation函数的8个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: fadeAnimationTrigger

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

开发者ID:brunotestahy，项目名称:bruno-games，代码行数:8，代码来源:fade-animation.ts

示例2: trigger

export const routeFadeStateTrigger = (params) => trigger('routeFadeState',[
    transition(':enter',[
        useAnimation(fadeAnimation,{params:params})
    ]),
    transition(':leave',animate(300,style({
        opacity:0
    })))
])

开发者ID:dhineeth，项目名称:angular-components，代码行数:8，代码来源:fadeAnimation.animation.ts

示例3: animation

  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 }}
);


export const slideStagger = animation([
  style({ transform: '{{ from }}' }),

开发者ID:jon-r，项目名称:wp_angular，代码行数:31，代码来源:animations.ts

示例4: style

      style({
        transform: '{{end}}'
      })
    )
  ],
  {
    params: {
      start: 'translateX(0%)',
      duration: '280ms',
      end: 'translateX(100%)'
    }
  }
);
export const slideRtrAnimations = trigger('slideRtr', [
  transition('void => *',
    useAnimation(slideRightIn)
  ),
  transition('* => void',
    useAnimation(slideRightOut)
  )
]);
export const slideRtlAnimations = trigger('slideRtl', [
  transition('void => *',
    useAnimation(slideRightIn)
  ),
  transition('* => void',
    useAnimation(slideLeftOut)
  )
]);
export const slideLtlAnimations = trigger('slideLtl', [
  transition('void => *',

开发者ID:tellxp，项目名称:avengers，代码行数:31，代码来源:slide-animations.ts

示例5: animate

  animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
], {
  params: {
    duration: '200ms',
    delay: '0ms',
    opacity: '0',
    scale: '1',
    x: '0',
    y: '0',
    z: '0'
  }
});

export const NavigationAnimation = [

  trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),

  trigger('animateStagger', [
    state('50', style('*')),
    state('100', style('*')),
    state('200', style('*')),

    transition('void => 50',
      query('@*',
        [
          stagger('50ms', [
            animateChild()
          ])
        ], {optional: true})),
    transition('void => 100',
      query('@*',

开发者ID:Yizongjishi，项目名称:angular-material-app，代码行数:31，代码来源:navigation.animation.ts

示例6: animation

    }
  }
);
export const scaleOut = animation(
  [
    style({
      transform: '{{start}}',
    }),
    animate('{{duration}}',
      style({
        transform: '{{end}}'
      })
    )
  ],
  {
    params: {
      start: '*',
      duration: '280ms',
      end: 'scale(0)'
    }
  }
);
export const scaleAnimations = trigger('scale', [
  transition('void => *',
    useAnimation(scaleIn)
  ),
  transition('* => void',
    useAnimation(scaleOut)
  )
]);

开发者ID:tellxp，项目名称:avengers，代码行数:30，代码来源:scale-animations.ts

示例7: animation

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

开发者ID:tellxp，项目名称:avengers，代码行数:30，代码来源:expand-animations.ts

示例8: animation

    }
  }
);
export const fadeout = animation(
  [
    style({
      opacity: '{{start}}'
    }),
    animate('{{duration}}',
      style({
        opacity: '{{end}}'
      })
    )
  ],
  {
    params: {
      start: '*',
      duration: '280ms',
      end: '0'
    }
  }
);
export const fadeAnimations = trigger('fade', [
  transition('void => *',
    useAnimation(fadeIn)
  ),
  transition('* => void',
    useAnimation(fadeout)
  )
]);

开发者ID:tellxp，项目名称:avengers，代码行数:30，代码来源:fade-animations.ts

注：本文中的@angular/animations.useAnimation函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。