在Angular 2.0(angular.io>功能)的主页中，您可以看到，有一种方法可以在“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中的这个动画。
你有什么想法我如何达到这个目标？
感谢您的答案提前！
编辑
对不起，我忘了提，我到底要什么
我想使用切换，但像Windows 10中的东西：
当您按“Windows A”时，右侧会显示一个侧边栏。
这正是我想要的网站动画，当你点击一个div容器，而不只是简单的出现和消失。
我认为jQuery代码将是这样的(只有出现与时间延迟)
$("divA").click(function() {
$("divB").toggle(1000);
});
对于CSS方式，您可以从他们的回购中检查这个example，这正是您正在寻找的。
使用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);
}
}
参考
> Animation API，超级简单，真的很简单。
笔记
这是一个临时API，新的名为ngAnimate 2.0的还不可用。但是，您可以查看@ matsko在AngularConnect – ngAnimate 2.0的演讲中的新功能。
这是一个plnkr与责备。
我希望它有帮助。
