本文整理汇总了TypeScript中@angular/core.transition函数的典型用法代码示例。如果您正苦于以下问题：TypeScript transition函数的具体用法？TypeScript transition怎么用？TypeScript transition使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了transition函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: slideAndFade
export function slideAndFade() {
return trigger('slideAndFade', [
state('*', style({
opacity: '0',
'pointer-events': 'none'
})),
state('active', style({
opacity: '1',
'pointer-events': 'initial'
})),
state('disabled', style({
opacity: '1',
'pointer-events': 'initial'
})),
transition('* => active', [
style({
opacity: '1',
transform: 'translateX(100%)'
}),
animate('250ms ease-in', style({transform: 'translateX(0%)'}))
]),
transition('active => *', [
style({
opacity: '1',
transform: 'translateX(0%)'
}),
animate('200ms ease-in', style({opacity: '0'}))
])
]);
}示例2: fallIn
export function fallIn() {
return trigger('fallIn', [
transition(':enter', [
style({opacity:'0', transform: 'translateY(40px)'}),
animate('.4s .2s ease-in-out', style({opacity:'1', transform: 'translateY(0)'}))
]),
transition(':leave', [
style({opacity:'1', transform: 'translateX(0)'}),
animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
])
]);
}示例3: slideToTop
function slideToTop() {
return trigger('routerTransition', [
state('void', style({position:'fixed', width:'100%', height:'100%'}) ),
state('*', style({position:'fixed', width:'100%', height:'100%'}) ),
transition(':enter', [
style({transform: 'translateY(100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
style({transform: 'translateY(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateY(-100%)'}))
])
]);
}示例4: slideToLeft
function slideToLeft() {
return trigger('routerTransition', [
state('void', style({position:'fixed', width:'40%'}) ),
state('*', style({position:'fixed', width:'0%'}) ),
transition(':enter', [
style({transform: 'translateX(40%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(-40%)'}))
])
]);
}示例5: moveIn
export function moveIn() {
return trigger('moveIn', [
state('void', style({position: 'fixed', width: '100%'}) ),
state('*', style({position: 'fixed', width: '100%'}) ),
transition(':enter', [
style({opacity:'0', transform: 'translateX(100px)'}),
animate('.6s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
]),
transition(':leave', [
style({opacity:'1', transform: 'translateX(0)'}),
animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
])
]);
}示例6: moveInLeft
export function moveInLeft() {
return trigger('moveInLeft', [
transition(':enter', [
style({opacity:'0', transform: 'translateX(-100px)'}),
animate('.6s .2s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
])
]);
}示例7: routerTransition
export function routerTransition() {
return trigger('routerTransition', [
state('void', style({
background: 'rgba(0, 0, 0, 0.7)',
visibility: 'hidden',
opacity: '0',
'z-index': '2000'
})),
state('*', style({
visibility: 'visible',
opacity: '1',
'z-index': '2000'
})),
transition(':leave', animate('500ms')),
transition(':enter', animate('500ms'))
])
}示例8: routerTransition
export function routerTransition() {
return trigger('routerTransition', [
transition('void => *', [
style({ transform: 'translateX(-10%)' }),
animate(400)
])
]);
}示例9: slideFromUp
export function slideFromUp() {
return trigger('routerTransition', [
state('void', style({'margin-top': '10px', opacity: '0'})),
state('*', style({'margin-top': '0px', opacity: '1'})),
transition(':enter', [
animate('0.3s ease-out', style({opacity: '1', 'margin-top': '0px'}))
])
]);
}示例10: slideFromBottom
export function slideFromBottom() {
return trigger('routerTransition', [
state('void', style({'padding-top': '20px', opacity: '0'})),
state('*', style({'padding-top': '0px', opacity: '1'})),
transition(':enter', [
animate('0.33s ease-out', style({opacity: '1', 'padding-top': '0px'}))
])
]);
}