本文整理汇总了TypeScript中@angular/core.trigger函数的典型用法代码示例。如果您正苦于以下问题：TypeScript trigger函数的具体用法？TypeScript trigger怎么用？TypeScript trigger使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了trigger函数的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: 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)'}))
])
]);
}示例3: routerTransition
export function routerTransition() {
return trigger('routerTransition', [
transition('void => *', [
style({ transform: 'translateX(-10%)' }),
animate(400)
])
]);
}示例4: 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'}))
])
]);
}示例5: 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'}))
])
]);
}示例6: trigger
var compile = (seq: AnimationMetadata) => {
var entry = trigger('myAnimation', [transition('state1 => state2', seq)]);
var compiledAnimationEntry = resolver.getAnimationEntryMetadata(entry);
var component = CompileDirectiveMetadata.create({
type: new CompileTypeMetadata({name: 'something'}),
template: new CompileTemplateMetadata({animations: [compiledAnimationEntry]})
});
return compileAnimations(component);
};示例7: 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)'}))
])
]);
}示例8: fadeIn
export function fadeIn():any {
return trigger('openClose', [
state('closed, void',
style({ opacity: "0" })),
state('opened',
style({ opacity: "1" })),
transition("closed <=> opened", [
animate(200)
])
]);
}示例9: 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%)'}))
])
]);
}示例10: 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%)'}))
])
]);
}