本文整理汇总了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);
}