本文整理匯總了TypeScript中angular2/src/animate/animation_builder.AnimationBuilder類的典型用法代碼示例。如果您正苦於以下問題：TypeScript AnimationBuilder類的具體用法？TypeScript AnimationBuilder怎麽用？TypeScript AnimationBuilder使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了AnimationBuilder類的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: constructor
constructor(
private _ab: AnimationBuilder,
private _e: ElementRef,
private _slotService: SlotService
) {
this._id = this._slotService.register();
let slot = this._slotService.getSlot(this._id);
this._ab.css()
.setDuration(2000)
.setFromStyles({
'opacity': 0.3,
'position': 'fixed',
'left': `${Math.floor(window.innerWidth / 2 - 18)}px`,
'top': `${Math.floor(window.innerHeight / 2 - 18)}px`
})
.setToStyles({
'opacity': 1.0,
'left': `${slot.centerX - 18}px`,
'top': `${slot.centerY - 18}px`
})
.start(this._e.nativeElement);
}示例2: constructor
constructor(animationBuilder:AnimationBuilder, private _el:ElementRef) {
this._animation = animationBuilder.css();
}示例3:
toggle(isVisible: boolean){
let animBuilder = this._animationBuilder.css();
animBuilder.setDuration(500);
if (isVisible){
animBuilder.setFromStyles({ right: '-100%' })
.setToStyles({ right: '0' });
}
else{
animBuilder.setFromStyles({ right: '0' })
.setToStyles({ right: '-100%' });
}
animBuilder.start(this._el.nativeElement);
}示例4:
toggle(isVisible: boolean = false){
let animation = this._animationBuilder.css();
animation.setDuration(500);
if (!isVisible){
animation.setFromStyles({ opacity: '1' })
.setToStyles({ opacity: '0'});
}
else{
animation.setFromStyles({opacity: '0'})
.setToStyles({ opacity: '1' });
}
animation.start(this._el.nativeElement);
}