“怎么做？”；Angular 2.0适用于TypeScript“；（阿尔法）动画作品？

我对棱角分明的场景很陌生。我刚刚开始学习Angular 2.0 for TypeScript，我想知道Angular 2.0中的动画（比如使用jQuery的简单HTML）是如何工作的

在Angular 2.0（Angular.io>功能）的主页中，您可以看到“Angular 2.0 for TypeScript”中有一种制作动画的方法

在我的研究中，我发现了如下情况：

但我认为这只是一个普通的JavaScript代码。我不确定 ngAnimate 2.0就是我想要的

不幸的是，我找不到更多关于这方面的信息

我想做的很简单：

当我只在一个简单的div容器中单击时，我希望显示另一个div容器（它在开头是不可见的）

在jQuery中，应该是这样的：

但是我想要的，是这个用TypeScript制作的动画。 你知道我是如何达到这个目标的吗

提前感谢您的回答

编辑

---

对不起，我忘了说我到底想要什么。 我想使用切换，但类似于Windows 10：

当您按“Windows+A”时，它将在右侧显示一个侧边栏。 这正是我想要的，当你点击一个div容器时，网站上的动画，而不仅仅是简单的出现和消失

我认为jQuery代码应该是这样的（只用于出现时间延迟）

对于简单的“动画”，只有在以下情况下才需要ng：

<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>

切换
第2组

顺便说一句，Angular 2动画还不可用。动画文档。

您可以使用CSS，或

对于CSS的方式，你可以检查他们的回购协议，这正是你所寻找的

使用

AnimationBuilder

可以像这样模拟相同的行为

首先，您要设置一个模板，该模板将按住按钮和div进行切换

@组件({
//设置一些样式
模板：`
一些内容
使有生气
`,
指令：[AnimateBox]//请参见下面的类
})

然后创建将处理动画的指令

@指令({
选择器：“[animate box]”，
exportAs:'ab'//必要时，我们将其导出，并可以在模板中获取其“toggle”方法
})
类AnimateBox{
构造函数（私有_ab:AnimationBuilder，私有_e:ElementRef）{}
切换（isVisible:boolean=false）{
让动画=这个；
动画
.setDuration（1000）；//持续时间（毫秒）
//如果不可见，我们将使其向下滑动
如果（！isVisible）{
动画
//设置初始样式
.setFromStyles（{height:'0'，width:'50%'，overflow:'hidden'}）
//设置动画结束时将添加的样式
.setToStyles（{height:'300px'}）
} 
//如果是可见的，我们让它向上滑动
否则{
动画
.setFromStyles（{高度：“300px”，宽度：“50%”）
.setToStyles（{height:'0'}）
}
//我们在元素中开始动画，在本例中是div
animation.start（此._e.nativeElement）；
}
}

参考

• 非常简单，非常非常简单

注释

这是一个临时API，名为ngAnimate 2.0的新API尚未提供。但你可以在上查看@matsko的演讲中的新内容

这是一张有复印件的照片

---

希望能有帮助。

对不起，我忘了说我到底想要什么。我想使用切换，但类似于Windows 10：当您按下“Windows+A”时，它将在右侧显示一个侧边栏。这正是我想要的，当你点击一个div容器时，网站上的动画，而不仅仅是简单的出现和消失。我认为jQuery代码应该是这样的（仅用于带时间延迟的显示）$（“divA”）.click（function（）{$（“divB”）.toggle（1000）；}）；那么，你认为Angular 2.0有没有办法达到这个“侧栏动画”？@SyleKu，欢迎来到StackOverflow。正如你所看到的，明确你到底需要什么帮助是非常重要的。我不知道用Angular 2的当前版本做什么。您必须执行类似于

（单击）=“animateDiv2（div2，1000）”

的操作，然后编写函数animateDiv2（），以执行toggle（）的操作——我假设这意味着在指定的时间段内修改CSS属性值。这正是我想要的！我真的可以用。但是你能再帮我一次吗？您的解决方案是完美的，但我还必须以另一种方式使用它：我的情况是，我有app2.ts，它设置了许多div。当我单击其中一个div时，应该只显示一个相同的“animation div”。但这个“动画版”在app.ts中。我认为一个好的解决方案就是使用我正在使用的EventEmitter（比如状态）。我的问题是：当调用EventEmitter中的subscribe函数时，如何从app.ts中的某个#框调用切换函数？我刚刚做了另一个决定。我现在正在使用css解决方案。这可能更容易。AnimationBuilder仍然是解决此问题的好方法。不了解

切换功能。不应该是相反的：
//如果是可见的，我们让它向上滑动如果（是可见的）{animation//设置初始样式。setFromStyles（{height:'0'，width:'50%'，overflow:'hidden'}）//设置动画结束时将添加的样式。setToStyles（{height:'300px'}）
？重要！！：
从'angular2/src/animate/animation\u builder'导入{AnimationBuilder}；
，不要从
angular2/animate
导入，因为它不起作用。@eppsilon只有这个PR引入了ngAnimate，但它正在工作中
<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>