TypeScript animations.stagger函数代码示例

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

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

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

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

示例1: group

        /** parallel vanishing */
        group([
            query(':leave .on-transition-fade', fadeVanish, { optional: true }),
            query(':leave mat-card', fadeVanish, { optional: true }),
            query(':leave mat-row', fadeVanish, { optional: true }),
            query(':leave mat-expansion-panel', fadeVanish, { optional: true })
        ]),

        /** parallel appearing */
        group([
            /** animate fade in for the selected components */
            query(':enter .on-transition-fade', fadeAppear, { optional: true }),

            /** Staggered appearing = "one after another" */
            query(':enter mat-card', stagger(50, fadeMoveIn), { optional: true }),
            query(':enter mat-row', stagger(30, fadeMoveIn), { optional: true })
            // disabled for now. They somehow appear expanded which looks strange
            // query(':enter mat-expansion-panel', stagger(30, fadeMoveIn), { optional: true })
        ])
    ])
]);

const slideIn = [style({ transform: 'translateX(-85%)' }), animate('600ms ease')];
const slideOut = [
    style({ transform: 'translateX(0)' }),
    animate(
        '600ms ease',
        style({
            transform: 'translateX(-85%)'
        })

开发者ID:CatoTH，项目名称:OpenSlides，代码行数:30，代码来源:animations.ts

示例2: style

        [
          style({ transform: 'translateY(0%)', opacity: 1 }),
          animate('0.2s ease-in-out', style({ transform: 'translateY(-3%)', opacity: 0 })),
          style({ position: 'fixed' })
        ],
        { optional: true }
      ),
      query(
        ':enter > *',
        [
          style({
            transform: 'translateY(-3%)',
            opacity: 0,
            position: 'static'
          }),
          animate('0.5s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
        ],
        { optional: true }
      )
    ]),
    query(
      ':enter .' + ANIMATE_ON_ROUTE_ENTER,
      stagger(100, [
        style({ transform: 'translateY(15%)', opacity: 0 }),
        animate('0.5s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
      ]),
      { optional: true }
    )
  ])
]);

开发者ID:macliems，项目名称:JixyFront，代码行数:30，代码来源:router.transition.ts

示例3: trigger

import { trigger, keyframes, style, animate, transition, query, stagger, AnimationTriggerMetadata } from '@angular/animations'
export const cascadeSlide: AnimationTriggerMetadata =
    trigger('slideInOutLeft', [
        transition('* <=> *', [
            query( //enter query
                ':enter',
                [
                    style({ opacity: 0, transform: 'translateX(-50%)' }),//starts invisible and -50% X
                    stagger(
                        '200ms',
                        animate(
                            '600ms ease-in-out',
                            keyframes([
                                style({ opacity: .8, transform: 'translateX(10%)', offset: 0.5 }),
                                style({ opacity: 1, transform: 'translateX(0)', offset: 1 })//moves to position and gets fully visible
                            ])//end of keyframes
                        )//end of animate
                    )//end of stagger
                ],
                { optional: true }
            ),//enter query ends
            query( //leave query
              ':leave', 
              animate('300ms',
                keyframes([
                    style({ opacity: .8, transform: 'translateX(-10%)', offset: 0.5 }),
                    style({ opacity: 0, transform: 'translateX(50%)', offset: 1 })
                ])//end of keyframes
            ),//end of animate
                { optional: true }
            )//leave query ends

开发者ID:predopredo，项目名称:angularStaggerAnimationTest，代码行数:31，代码来源:cascadeSlide.ts

示例4: useAnimation

], {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 }}' }),
  stagger(defaultStagger, [
    animate('{{ time }}', style({ transform: '{{to}}' }))
  ])
], {params: { time: defaultTime, to: '*', from: '*' }});

/* UNUSED, kept if bug fixed in angular

export const slideChildren = animation([
  query(':enter', useAnimation(slide, {params: { from: '{{ enterFrom }}' }}), { optional: true }),
  query(':leave', useAnimation(slide, {params: { to: '{{ leaveTo }}' }}), { optional: true })
]);
*/

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

示例5: trigger

});

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('@*',
        [
          stagger('100ms', [
            animateChild()
          ])
        ], {optional: true})),
    transition('void => 200',
      query('@*',
        [
          stagger('200ms', [
            animateChild()
          ])

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

示例6: trigger

import { trigger, stagger, transition, style, animate, query } from '@angular/animations';

export const listAnimation = trigger('listAnim', [
  transition('* => *', [
    query(':enter', style({opacity: 0}), { optional: true }),
    query(':enter', stagger(100, [
      animate('1s', style({opacity: 1}))
    ]), { optional: true }),
    query(':leave', style({opacity: 1}), { optional: true }),
    query(':leave', stagger(100, [
      animate('1s', style({opacity: 0}))
    ]), { optional: true })
  ])
]);

开发者ID:zichenma，项目名称:prodinator，代码行数:14，代码来源:list.anim.ts

示例7: trigger

import { trigger, stagger, animate, style, group, query, transition } from '@angular/animations';

export const routerTransition = trigger('routerTransition', [
    transition('* <=> *', [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' })
            , { optional: true }),
        query('.block', style({ opacity: 0 })
            , { optional: true }),
        group([
            query(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ], { optional: true }),
            query(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ], { optional: true }),
        ]),
        query(':enter .block', stagger(400, [
            style({ transform: 'translateY(100px)' }),
            animate('1s ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 })),
        ]), { optional: true }),
    ])
]);

开发者ID:asadsahi，项目名称:AspNetCoreSpa，代码行数:24，代码来源:router.animations.ts

示例8: state

     state('active', style({
       transform: 'rotate(225deg)'
     })),
     transition('* <=> *', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
   ]),
   trigger('speedDialStagger', [
     transition('* => *', [
 
       query(':enter', style({ opacity: 0 }), {optional: true}),
 
       query(':enter', stagger('40ms',
         [
           animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
             keyframes(
               [
                 style({opacity: 0, transform: 'translateY(10px)'}),
                 style({opacity: 1, transform: 'translateY(0)'}),
               ]
             )
           )
         ]
       ), {optional: true}),
 
       query(':leave',
         animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
           keyframes([
             style({opacity: 1}),
             style({opacity: 0}),
           ])
         ), {optional: true}
       )

开发者ID:intermadix，项目名称:XBMS-webapp，代码行数:31，代码来源:speed-dial-fab.animations.ts

示例9: state

	state('large', style({
		opacity: 1, transform: 'scale(1.2)', backgroundColor: '#eee',
	})),
	transition('small <=> large', animate('300ms ease-in', style({
		transform: 'translateY(50px)'
	})))
]);
export let listAnim = trigger('listAnimation', [
	transition('*=>*', [
		query(':enter', style({
			opacity: 0
		}), { optional: true }),
		query(':enter', stagger('200ms', [
			animate('1s ease-in', keyframes([
				style({ opacity: 0, transform: 'translateY(-77px)', offset: 0 }),
				style({ opacity: .5, transform: 'translateY(37px)', offset: .3 }),
				style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
			]))
		]), { optional: true }),
		query(':leave', stagger('200ms', [
			animate('1s ease-in', keyframes([
				style({ opacity: 1, transform: 'translateY(0px)', offset: 0 }),
				style({ opacity: .5, transform: 'translateY(37px)', offset: .3 }),
				style({ opacity: 0, transform: 'translateY(-77px)', offset: 1 }),
			]))
		]), { optional: true }),
	])
]);
export let leftToRight = trigger('explainerAnim', [
	transition('*=>*', [
		query('.well', style({ opacity: 0, transform: 'translateX(-40px)' })),

开发者ID:MarKamenov，项目名称:Front-end，代码行数:31，代码来源:animations.ts

示例10: group

                    group([  // block executes in parallel
                        query(':enter', group([
                        style({ transform: 'translateX(100%)' }),
                        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })) ]), { optional: true }),
                        query(':leave', group([ animateChild(),
                        style({ transform: 'translateX(0%)' }),
                        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
                        ]), { optional: true }),
                    ]),
                    group([query(':enter', [animateChild()], { optional: true } )]),
                    ])
        ])
    ]);

export const homeTransition =
trigger('homeTransition', [
    transition(':enter', [
      query('.block', style({ opacity: 0 })),
      query('.block', stagger(300, [
        style({ transform: 'translateY(100px)' }),
        animate('0.8s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
      ])),
    ]),
    transition(':leave', [
      query('.block', stagger(300, [
        style({ transform: 'translateY(0px)', opacity: 1 }),
        animate('0.8s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(100px)', opacity: 0})),
      ]))
    ])
  ]);

开发者ID:aleksK22，项目名称:FitnessPro，代码行数:30，代码来源:router.animation.ts

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