我对Angular场景非常陌生。我刚开始学习TypeScript的Angular 2.0,我想知道动画(就像在带有jQuery的简单HTML中)是如何在Angular 2.0 中工作的
在Angular 2.0的主页(Angular.io>Features)中,您可以看到,有一种方法可以在"Angular 2.0 for TypeScript"中进行动画制作。
在我的研究中,我发现了这样的东西:http://www.angular-dev.com/angular-connect-slides/#/26/0/
但我认为这只是一个普通的JavaScript代码。我不确定ngAnimate 2.0就是我想要的。
不幸的是,我再也找不到关于这方面的信息了。
我想做的很简单:
当我只在一个简单的div容器中单击时,我希望出现另一个div容器(它在开头是不可见的)。
在jQuery中,它应该是这样的:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle
但我想要的是TypeScript中的动画。你知道我是如何达到这个目标的吗?
感谢您提前回答!
编辑对不起,我忘了提,我到底想要什么。我想使用切换,但类似于Windows10:
当你按下"Windows+A"时,它会在右侧显示一个侧边栏。这正是我想要的网站上的动画,当你点击div容器时,而不仅仅是简单的出现和消失。
我认为jQuery代码应该是这样的(只用于出现时间延迟)
$("divA").click(function() {
$("divB").toggle(1000);
});
您可以使用CSS或AnimationBuilder
对于CSS的方式,你可以从他们的repo中查看这个例子,它正是你想要的。
使用AnimationBuilder
,您可以模拟与此相同的行为
首先,您设置了一个模板,该模板将按住按钮和div来切换
@Component({
// Setting up some styles
template: `
<div animate-box #box="ab" style="height:0; width:50%; overflow: hidden;">Some content</div>
<button (click)="box.toggle(visible = !visible)">Animate</button>
`,
directives : [AnimateBox] // See class below
})
然后,您创建将处理动画的指令
@Directive({
selector : '[animate-box]',
exportAs : 'ab' // Necessary, we export it and we can get its 'toggle' method in the template
})
class AnimateBox {
constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}
toggle(isVisible: boolean = false) {
let animation = this._ab.css();
animation
.setDuration(1000); // Duration in ms
// If is not visible, we make it slide down
if(!isVisible) {
animation
// Set initial styles
.setFromStyles({height: '0', width: '50%', overflow: 'hidden'})
// Set styles that will be added when the animation ends
.setToStyles({height: '300px'})
}
// If is visible we make it slide up
else {
animation
.setFromStyles({height: '300px', width: '50%'})
.setToStyles({height: '0'})
}
// We start the animation in the element, in this case the div
animation.start(this._e.nativeElement);
}
}
参考
- 动画API,它超级简单,真的,真的很简单
票据
这是一个临时的API,名为ngAnimate2.0的新API还不可用。但你可以在AngularConnect-ngAnimate 2.0上查看@matsko的演讲中有什么新内容。
这是一个带有repo的plnkr。
我希望它能有所帮助。
对于简单的"动画",您只需要ng if:
<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>
BTW,Angular 2动画还不可用动画文档已经登陆。