本文整理匯總了TypeScript中@angular/core.state函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript state函數的具體用法？TypeScript state怎麽用？TypeScript state使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了state函數的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: 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'}))
])
]);
}示例3: 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'}))
])
]);
}示例4: fadeIn
export function fadeIn():any {
return trigger('openClose', [
state('closed, void',
style({ opacity: "0" })),
state('opened',
style({ opacity: "1" })),
transition("closed <=> opened", [
animate(200)
])
]);
}示例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: 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%)'}))
])
]);
}示例7: 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%)'}))
])
]);
}示例8: 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'))
])
}示例9: rotateInOut
function rotateInOut() {
return trigger('routerTransition', [
state('void', style({
opacity: 0
})),
state('*', style({
opacity: 1
})),
transition(':enter', [
// Note: delay the 'enter' animation, so that the previous route's 'leave' animation has time to complete
animate('0.5s 0.5s ease-in-out', style({
opacity: 1
}))
]),
transition(':leave', [
animate('0.5s ease-in-out', style({
opacity: 0
}))
])
]);
}示例10: Collapse
export function Collapse(duration: number = 300) {
return trigger('collapse', [
state('collapsed, true, void', style({
height: '0',
opacity: '0',
overflow: 'hidden'
})),
state('expanded, false', style({
height: '*',
opacity: '1',
overflow: 'hidden'
})),
transition('true => false, collapsed => expanded', [
animate(duration+'ms ease', keyframes([
style({opacity: '1'}),
style({height: '*'})
]))
]),
transition('false => true, expanded => collapsed', [
animate(duration+'ms ease', style({height: '0'}))
])
])
}