Question

我是Angular场景中的新人。我刚开始学习TypeScript的Angular 2.0，我想知道动画（如简单的带有jQuery的HTML）如何在Angular 2.0中运行

在Angular 2.0（angular.io＆gt;功能）的主页中，您可以看到，有一种方法可以在“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

您可以使用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的新API尚不可用。但是你可以在AngularConnect - ngAnimate 2.0查看@ matsko＆＃t>中的新内容。

这里有一个plnkr和一个复制品。

我希望它有所帮助。

Answer 2

对于简单的“动画”，您只需要ng-if：

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

~~BTW，Angular 2动画尚不可用。~~动画文档has landed。

“Angular 2.0 for TypeScript”（alpha）动画如何工作？

2 个答案: