本文整理匯總了TypeScript中@angular/animations.sequence函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript sequence函數的具體用法？TypeScript sequence怎麽用？TypeScript sequence使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了sequence函數的6個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: query
}),
query(':enter .' + ANIMATE_ON_ROUTE_ENTER, style({ opacity: 0 }), {
optional: true
}),
sequence([
query(
':leave > *',
[
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 }),示例2: trigger
*
* When the menu panel is removed from the DOM, it simply fades out after a brief
* delay to display the ripple.
*/
transformMenu: trigger('transformMenu', [
state('void', style({
opacity: 0,
// This starts off from 0.01, instead of 0, because there's an issue in the Angular animations
// as of 4.2, which causes the animation to be skipped if it starts from 0.
transform: 'scale(0.01, 0.01)'
})),
transition('void => enter', sequence([
query('.mat-menu-content', style({opacity: 0})),
animate('100ms linear', style({opacity: 1, transform: 'scale(1, 0.5)'})),
group([
query('.mat-menu-content', animate('400ms cubic-bezier(0.55, 0, 0.55, 0.2)',
style({opacity: 1})
)),
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({transform: 'scale(1, 1)'})),
])
])),
transition('* => void', animate('150ms 50ms linear', style({opacity: 0})))
]),
/**
* This animation fades in the background color and content of the menu panel
* after its containing element is scaled in.
*/
fadeInItems: trigger('fadeInItems', [
// TODO(crisbeto): this is inside the `transformMenu`
// now. Remove next time we do breaking changes.示例3: sequence
opacity : 0
})
], {optional: true}),
sequence([
group([
query('content > :leave', [
style({
transform: 'translateX(0)',
opacity : 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateX(-100%)',
opacity : 0
}))
], {optional: true}),
query('content > :enter', [
style({transform: 'translateX(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateX(0%)',
opacity : 1
}))
], {optional: true})
]),
query('content > :leave', animateChild(), {optional: true}),
query('content > :enter', animateChild(), {optional: true})
])
])
]),
示例4: trigger
import { trigger, transition, query, style, stagger, animate, group, keyframes, animateChild, sequence } from '@angular/animations';
export const routerAnimation =
trigger('routerAnimations', [
transition('* <=> *', [
query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
sequence([
group([query(':leave', [animateChild()], { optional: true } )]),
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})),
])),
]),示例5: trigger
animate,
sequence,
style,
transition,
trigger,
} from '@angular/animations';
export const rowAnimation: AnimationTriggerMetadata = trigger('rowAnimation', [
transition('void => true', [
style({
height: '*',
opacity: '0',
transform: 'translateX(-550px)',
'box-shadow': 'none',
}),
sequence([
animate('.35s ease', style({
height: '*',
opacity: '.2',
transform: 'translateX(0)',
'box-shadow': 'none',
})),
animate('.35s ease', style({
height: '*',
opacity: 1,
transform: 'translateX(0)',
}))
])
])
]);
示例6: trigger
animate,
style,
group,
query,
transition,
keyframes,
animateChild } from '@angular/animations';
export const routerTransition = trigger('routerTransition', [
transition('* => *', [
query(':enter, :leave', style({ position: 'fixed', width: '100%' }), {optional: true}),
query(':enter', style({ opacity: 0 }), {optional: true}),
sequence([
query(':leave', animateChild(), {optional: true}),
group([
query(':leave', [
style({ opacity: 1 }),
animate('300ms ease-out',
style({ opacity: 0 }))
], {optional: true}),
query(':enter', [
style({ opacity: 0 }),
animate('300ms 200ms ease-in',
style({ opacity: 1 }))
], {optional: true}),
]),
query(':enter', animateChild(), {optional: true})
])
])
]);