如何＆QUOT;角2.0打字稿＆QUOT; （阿尔法）动画作品？ [英] How does "Angular 2.0 for TypeScript" (alpha) animation work?

问题描述

我在现场角度很新。我刚开始学角2.0打字稿，我想知道，动画（如在一个简单的HTML使用jQuery）如何工作角2.0

在角2.0（angular.io>功能）的主页，你可以看到，有一种方法为打字稿角2.0做动画

在我的研究，我发现这样的事情：
<一href=\"http://www.angular-dev.com/angular-connect-slides/#/26/0/\">http://www.angular-dev.com/angular-connect-slides/#/26/0/

但我认为这只是一个普通的JavaScript code。而且我不知道
ngAnimate 2.0是这样的，我所期待的。

不幸的是，我再也找不到这方面的消息。

我想要做什么，其实很简单：

当我在一个简单的div容器单击只是，我希望出现另一个div容器（这是在开始unvisible）。

在jQuery的，这将是这样的：<一href=\"http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle\">http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

但我想，这是动画打字稿。
你有什么想法，我如何实现这一目标？

感谢提前你的答案！

修改
我很抱歉，我忘了提，正是我想要的。
我想在Windows 10使用切换，但这样的：

在preSS的Windows + A，它会出现一个工具条右侧。
没错，这就是我想在网站上的动画，当你点击一个div容器，而不只是简单的出现和消失。

我觉得jQuery的code是类似的东西（仅用于时间延迟出现）

  $（DIVA）。点击（函数（）{
    $（DIVB）切换（1000）。
}）;
 

解决方案

您可以使用CSS，或<一个href=\"https://github.com/angular/angular/blob/master/modules/angular2/src/animate/animation_builder.ts\">AnimationBuilder

有关CSS的方式，你可以检查此例如，从他们的回购的那不正是你所寻找的。

使用 AnimationBuilder 您可以模拟这样相同的行为

首先您设置会按住按钮和div切换模板

@Component（{
  //设置一些样式
  模板：`
    ＆LT;格动画盒＃箱=AB的风格=高度：0;宽度：50％;溢出：隐藏;＆GT;有些内容与LT; / DIV＆GT;
    ＆LT;按钮（点击）=box.toggle（可见=可见！）＆GT;动画＆LT; /按钮＆GT;
  `
  指令：[AnimateBox] //见下类
}）


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

@Directive（{
  选择：[动画盒]'，
  EXPORTAS：'AB'//必要时，我们将其导出，我们可以在模板中得到它的切换的方法
}）
类AnimateBox {
  构造函数（私人_AB：AnimationBuilder，私人_e：ElementRef）{}  切换（ISVISIBLE：布尔= FALSE）{
    让动画= this._ab.css（）;
    动画
      .setDuration（1000）; //持续时间以毫秒为单位    //如果是不可见的，我们让它滑下
    如果（！ISVISIBLE）{      动画
        //设置初始风格
        .setFromStyles（{高度：0，宽度：'50％'，溢出：'隐藏'}）
        //设置样式将被添加在动画结束
        .setToStyles（{高度：'300像素'}）
    }
    //如果是可见的，我们让它向上滑动
    其他{
      动画
        .setFromStyles（{高度：300像素，宽：'50％'}）
        .setToStyles（{高度：'0'}）
    }    //我们在元件启动动画，在这种情况下，格
    animation.start（this._e.nativeElement）;
  }
}


参考

• 动画API ，这是超级简单，真的，真的很简单。

备注

这是一个临时的API，新建一个名为ngAnimate 2.0尚未公布。但你可以检查什么在 AngularConnect @ matsko的谈话新 - ngAnimate 2.0

下面是一个 plnkr 一个摄制。

我希望它能帮助。

I am very new in the Angular scene. I just started to learn Angular 2.0 for TypeScript and I was wondering, how the animation (like in a simple HTML with jQuery) works in Angular 2.0

In the homepage of the Angular 2.0 (angular.io > Features) you can see, that there is a way to do animation in "Angular 2.0 for TypeScript".

In my research I found something like this: http://www.angular-dev.com/angular-connect-slides/#/26/0/

But I think this is just a normal JavaScript code. And I am not sure if ngAnimate 2.0 is that, what I am looking for.

Unfortunately, I can't find anymore information about that.

What I want to do, is very simple:

When I click just in a simple div container, I want that another div-container appears (which is in the beginning unvisible).

In jQuery, it would be something like this: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

But what I want, is this animation in TypeScript. Do you have any idea how I reach this goal?

Thanks for your answers in advance!

EDIT I am sorry, I forgot to mention, what exactly I want. I want to use toggle, but something like in Windows 10:

When you press "Windows + A", it will appear a sidebar on the right side. Exactly that is what I want with animation on the website, when you click on a div-container, and not just simple appearing and disappearing.

I think the jQuery code would be something like that (only for appearing with a time delay)

$("divA").click(function() {
    $("divB").toggle(1000);
});

解决方案

You can use CSS, or AnimationBuilder

For the CSS way you can check this example from their repo that does exactly what you are looking for.

With AnimationBuilder you can simulate the same behavior like this

First you set up the template that'll hold the button and div to toggle

@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
})

Then you create the directive that will handle the animation

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

Reference

• Animation API, it's super simple, really, really simple.

Notes

This is a temporary API, the new one called ngAnimate 2.0 is not yet available. But you can check what's new in @matsko's talk at AngularConnect - ngAnimate 2.0.

Here's a plnkr with a repro.

I hope it helps.

这篇关于如何＆QUOT;角2.0打字稿＆QUOT; （阿尔法）动画作品？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！