"Angular 2.0 for TypeScript" (alpha) 动画是如何工作的？

Question

我在 Angular 圈子里很陌生。我刚开始学习 TypeScript 的 Angular 2.0，我想知道动画（就像简单的 HTML 和 jQuery 一样）在 Angular 2.0[=14= 中是如何工作的]

在 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);
});

Answer 1

对于简单的 "animation" 你只需要 ng-if:

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

~~顺便说一句，Angular 2 动画尚不可用。~~ 动画文档 has landed。

Answer 2

您可以使用CSS，或AnimationBuilder

对于 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 的新版本尚不可用。但是您可以在 AngularConnect - ngAnimate 2.0.

查看@matsko 的演讲中的新内容

这是一个 plnkr 的复制品。

希望对您有所帮助。

"Angular 2.0 for TypeScript" (alpha) 动画是如何工作的？

How does "Angular 2.0 for TypeScript" (alpha) animation work?

typescript

angular