“Angular 2.0 for TypeScript”(alpha)动画如何工作?

前端之家收集整理的这篇文章主要介绍了“Angular 2.0 for TypeScript”(alpha)动画如何工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在角色场景中我非常新。我刚刚开始学习用于TypeScript的Angular 2.0,我想知道,动画(如在jQuery的简单的HTML中)如何在Angular 2.0中运行

在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);
});
您可以使用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的还不可用。但是,您可以查看@ matsko在AngularConnect – ngAnimate 2.0的演讲中的新功能

这是一个plnkr与责备。

我希望它有帮助。

原文链接:https://www.f2er.com/angularjs/144177.html

猜你在找的Angularjs相关文章