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

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

在Angular 2.0(angular.io> Features)的主页中,您可以看到,有一种方法可以在"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);
});

Eric Martine.. 24

您可以使用CSS或AnimationBuilder

对于CSS方式,您可以从他们的repo中检查这个示例,它正是您正在寻找的.

有了AnimationBuilder你可以模拟这样相同的行为

首先,设置模板,按住按钮并按div切换

@Component({
  // Setting up some styles
  template: `
    
Some content
    Animate
  `,
  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);
  }
}

@Component({
  // Setting up some styles
  template: `
    
Some content
    Animate
  `,
  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);
  }
}