本文整理匯總了TypeScript中@angular/animations.state函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript state函數的具體用法？TypeScript state怎麽用？TypeScript state使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了state函數的8個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: makeEngine
() => {
const engine = makeEngine();
const trig = trigger('something', [
state('x', style({opacity: 0})),
state('y', style({opacity: .5})),
state('z', style({opacity: 1})),
transition('* => *', animate(1000)),
]);
registerTrigger(element, engine, trig);
setProperty(element, engine, trig.name, 'x');
setProperty(element, engine, trig.name, 'y');
engine.flush();
expect(parseFloat(element.style.opacity)).not.toEqual(.5);
const player1 = engine.players[0];
setProperty(element, engine, trig.name, 'z');
engine.flush();
const player2 = engine.players[0];
expect(parseFloat(element.style.opacity)).not.toEqual(.5);
player2.finish();
expect(parseFloat(element.style.opacity)).toEqual(1);
player1.finish();
expect(parseFloat(element.style.opacity)).toEqual(1);
});示例2: it
it('should cancel all existing players if a removal animation is set to occur', () => {
const engine = makeEngine();
const trig = trigger('something', [
state('m', style({opacity: 0})), state('n', style({opacity: 1})),
transition('* => *', animate(1000))
]);
registerTrigger(element, engine, trig);
setProperty(element, engine, trig.name, 'm');
setProperty(element, engine, trig.name, 'n');
engine.flush();
let doneCount = 0;
function doneCallback() { doneCount++; }
const player1 = engine.players[0];
player1.onDone(doneCallback);
expect(doneCount).toEqual(0);
setProperty(element, engine, trig.name, 'void');
engine.flush();
expect(doneCount).toEqual(1);
});示例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: 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' }))
])
]);
}示例5: it
it('should construct a trigger based on the states and transition data', () => {
const result = makeTrigger('name', [
state('on', style({width: 0})), state('off', style({width: 100})),
transition('on => off', animate(1000)), transition('off => on', animate(1000))
]);
expect(result.states).toEqual({'on': {width: 0}, 'off': {width: 100}});
expect(result.transitionFactories.length).toEqual(2);
});示例6: fadeInAnimation
function fadeInAnimation() {
return trigger('routerTransition', [
state('void', style({position:'fixed', width:'100%'}) ),
state('*', style({position:'fixed', width:'100%'}) ),
transition(':enter', [
style({opacity: 0}),
animate('1.5s', style({opacity: 1}))
]),
]);
}示例7: visibility
export function visibility() {
return trigger('visibility', [
state('shown', style({
transform: 'scale(1.0)',
opacity: 1
})),
state('hidden', style({
transform: 'scale(0.5)',
opacity: 0
})),
transition('* => *', animate('0.5s ease-in-out'))
]);
}示例8: flip
export function flip(name = 'flip', first = true, duration = 350, easing = 'ease-in-out') {
const timings = `${duration}ms ${easing}`;
return trigger(name, [
state(first ? 'first' : 'second', style({ transform: `rotateY(${first ? 360 : 0}deg)`, display: 'block' })),
state(first ? 'second' : 'first', style({ transform: `rotateY(180deg)`, display: 'none' })),
transition(':enter', animate(0)),
transition('* => *', animate(`${duration}ms ${easing}`)),
transition(
first ? 'second => first' : 'first => second',
animate(timings, keyframes([style({ display: 'none', offset: 0 }), style({ display: 'block', offset: 0.2 })])),
),
]);
}