“Angular 2.0 for TypeScript”（alpha）动画是如何工作的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34165140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does "Angular 2.0 for TypeScript" (alpha) animation work?
提问by TheHeroOfTime
I am very new in the Angular scene. I just started to learn Angular 2.0 for TypeScript and I was wondering, how the animation (like in a simple HTML with jQuery) works in Angular 2.0
我在 Angular 场景中很新。我刚开始学习 TypeScript 的 Angular 2.0，我想知道动画（就像使用 jQuery 的简单 HTML 一样）在 Angular 2.0 中是如何工作的
In the homepage of the Angular 2.0 (angular.io > Features) you can see, that there is a way to do animation in "Angular 2.0 for TypeScript".
在 Angular 2.0 的主页（angular.io > Features）中，您可以看到，在“Angular 2.0 for TypeScript”中有一种制作动画的方法。
In my research I found something like this: http://www.angular-dev.com/angular-connect-slides/#/26/0/
在我的研究中，我发现了这样的东西：http: //www.angular-dev.com/angular-connect-slides/#/26/0/
But I think this is just a normal JavaScript code. And I am not sure if ngAnimate 2.0 is that, what I am looking for.
但我认为这只是一段普通的 JavaScript 代码。而且我不确定 ngAnimate 2.0 是否是我正在寻找的。
Unfortunately, I can't find anymore information about that.
不幸的是，我找不到有关此的更多信息。
What I want to do, is very simple:
我想做的，很简单：
When I click just in a simple div container, I want that another div-container appears (which is in the beginning unvisible).
当我在一个简单的 div 容器中单击时，我希望出现另一个 div 容器（在开始时不可见）。
In jQuery, it would be something like this: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle
在 jQuery 中，它会是这样的：http: //www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle
But what I want, is this animation in TypeScript. Do you have any idea how I reach this goal?
但我想要的是 TypeScript 中的这个动画。你知道我是如何达到这个目标的吗？
Thanks for your answers in advance!
提前感谢您的回答！
EDITI am sorry, I forgot to mention, what exactly I want. I want to use toggle, but something like in Windows 10:
编辑对不起，我忘了提，我到底想要什么。我想使用切换，但类似于 Windows 10：
When you press "Windows + A", it will appear a sidebar on the right side. Exactly that is what I want with animation on the website, when you click on a div-container, and not just simple appearing and disappearing.
当您按“Windows + A”时，它会在右侧出现一个侧边栏。这正是我想要的网站上的动画，当您单击 div 容器时，而不仅仅是简单的出现和消失。
I think the jQuery code would be something like that (only for appearing with a time delay)
我认为 jQuery 代码会是这样的（仅用于出现时间延迟）
$("divA").click(function() {
$("divB").toggle(1000);
});
回答by Eric Martinez
You can use CSS, or AnimationBuilder
您可以使用 CSS 或AnimationBuilder
For the CSS way you can check this examplefrom their repo that does exactly what you are looking for.
对于 CSS 方式，您可以从他们的 repo 中查看此示例，该示例完全符合您的要求。
With AnimationBuilderyou can simulate the same behavior like this
有了AnimationBuilder你可以模拟这样相同的行为
First you set up the template that'll hold the button and div to toggle
首先，您设置将保持按钮和 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
})
Then you create the directive that will handle the animation
然后创建将处理动画的指令
@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);
}
}
Reference
参考
- Animation API, it's super simple, really, really simple.
- 动画API，超级简单，真的，真的很简单。
Notes
笔记
This is a temporary API, the new one called ngAnimate 2.0 is not yet available. But you can check what's new in @matsko's talk at AngularConnect - ngAnimate 2.0.
这是一个临时 API，名为 ngAnimate 2.0 的新 API 尚不可用。但是您可以查看@matsko 在AngularConnect - ngAnimate 2.0 上的演讲中的新内容。
Here's a plnkrwith a repro.
这是一个带有 repro 的 plnkr。
I hope it helps.
我希望它有帮助。
回答by Mark Rajcok
For your simple "animation" you only need ng-if:
对于简单的“动画”，您只需要 ng-if：
<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>
BTW, Angular 2 animation is not available yet.The animations documentation has landed.
顺便说一句，Angular 2 动画尚不可用。动画文档已经登陆。
