本文整理汇总了TypeScript中@angular/core.style函数的典型用法代码示例。如果您正苦于以下问题：TypeScript style函数的具体用法？TypeScript style怎么用？TypeScript style使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了style函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: 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)'}))
])
]);
}示例2: 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'}))
])
]);
}示例3: 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'}))
])
]);
}示例4: 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)'}))
])
]);
}示例5: fadeIn
export function fadeIn():any {
return trigger('openClose', [
state('closed, void',
style({ opacity: "0" })),
state('opened',
style({ opacity: "1" })),
transition("closed <=> opened", [
animate(200)
])
]);
}示例6: it
it('should get annotations for HeroDetailComponent', () => {
const HeroDetailComponent =
reflector.findDeclaration('src/app/hero-detail.component', 'HeroDetailComponent');
const annotations = reflector.annotations(HeroDetailComponent);
expect(annotations.length).toEqual(1);
const annotation = annotations[0];
expect(annotation.selector).toEqual('my-hero-detail');
expect(annotation.animations).toEqual([trigger('myAnimation', [
state('state1', style({'background': 'white'})),
transition(
'* => *',
sequence([group([animate(
'1s 0.5s',
keyframes([style({'background': 'blue'}), style({'background': 'red'})]))])]))
])]);
});示例7: routerTransition
export function routerTransition() {
return trigger('routerTransition', [
transition('void => *', [
style({ transform: 'translateX(-10%)' }),
animate(400)
])
]);
}示例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: 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'}))
])
]);
}示例10: 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
}))
])
]);
}