「アルファ」アニメーションの「Angular 2.0」はどのように機能しますか？

Question

私はAngularシーンで非常に新しいです。私はちょうどTypeScriptのAngular 2.0を学び始めました。アニメーション（jQueryを使った単純なHTMLのような）がAngular 2.0でどのように動作するのか、疑問を抱いていました。

Angular 2.0 「Angular 2.0 for TypeScript」でアニメーションを行う方法があることを見てください。私の研究では

私はこのようなものが見つかりました： http://www.angular-dev.com/angular-connect-slides/#/26/0/

をしかし、私は、これは普通のJavaScriptコードだと思います。 ngAnimate 2.0がそうであるかどうかはわかりませんが、私が探しているものです。

残念ながら、これ以上の情報は見つかりません。私が何をしたいか

は、非常に簡単です：私はちょうど簡単なのdivコンテナをクリックすると

、私は（開始unvisibleである）別のdivコンテナが表示されることを望みます。 jQueryので

、それはこのようなものになるだろう：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

しかし、私がしたい、活字体で、このアニメーションがあります。 この目標にどのように到達したか考えていますか？

ご回答ありがとうございます。

EDIT 私は申し訳ありませんが、正確に私が欲しいものを言いました。 トグルを使用したいが、Windows 10のようなもの：

「Windows + A」を押すと、右側にサイドバーが表示されます。 div-containerをクリックするだけで、簡単に表示されたり消えたりするのではなく、ウェブサイト上でアニメーションを使用したいのとまったく同じです。

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

：

私はあなただけNG-場合は必要なのjQueryコードは、あなたの簡単な「アニメーション」の場合（のみ時間遅れで表示されるため）そのような何か

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

Answer 1

あなたは、あなたが探しているまさにありません彼らのレポからこのexampleを確認することができますCSSの道のためにCSS、またはAnimationBuilder

を使用することができます。AnimationBuilderで

あなたはあなたが処理するディレクティブを作成すると

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

を切り替えるには、ボタンやdiv要素を保持しますテンプレートを設定し、この

まずように同じ動作をシミュレートすることができますアニメーション

@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で確認できます。

ここにのレシピがあります。

私はそれが役に立ちそうです。

Answer 2

だと思います ところで、Angular 2アニメーションはまだ使用できません。 アニメーションのドキュメントhas landed。