本文整理匯總了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'}))
])
]);
}