「Angular 2.0 for TypeScript」（alpha）動畫是如何工作的？

我在Angular場景中很新穎。我剛開始學習TypeScript的Angular 2.0，我想知道動畫（如jQuery中的簡單HTML）如何在Angular 2.0中工作。「Angular 2.0 for TypeScript」（alpha）動畫是如何工作的？

在Angular 2.0的主頁（angular.io> Features）中，您可以請參閱「有關TypeScript的Angular 2.0」中的動畫方法。

在我的研究，我發現這樣的事情： http://www.angular-dev.com/angular-connect-slides/#/26/0/

但我認爲這只是一次正常的JavaScript代碼。我不確定ngAnimate 2.0是否是我正在尋找的。

不幸的是，我找不到有關這方面的信息。

我想要做什麼，其實很簡單：

當我點擊只是一個簡單的div容器，我希望出現另一個DIV容器（這是在開始unvisible）。

在jQuery中，這將是這樣的：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

但我想，這是什麼動畫打字稿。你知道我如何達到這個目標嗎？

感謝您的提前解答！

編輯對不起，我忘了提，我到底想要什麼。我想使用切換，但在Windows 10中的東西：

當您按下「Windows + A」時，它會出現一個側邊欄在右側。正是我想要的網站上的動畫，當你點擊一個div容器，而不僅僅是簡單的出現和消失。

我認爲jQuery代碼將是類似的東西（僅適用於時間延遲出現）

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

來源

2015-12-08 TheHeroOfTime

您可以使用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尚未公佈。但是你可以通過AngularConnect - ngAnimate 2.0查看@ matsko的演講中的新內容。

這裏有一個攝製一個plnkr。

我希望它有幫助。

來源

2015-12-09 04:26:38

這正是我想要的！我真的可以使用它。但你能幫我多做一次嗎？您的解決方案是完美的** **，但我也有另一種方式來使用它：我的情況是，我有** ** app2.ts它設置許多的div。當我點擊其中一個div時，應該出現唯一的**一個**相同的「animation-div」。但是這個「animation-div」在** app.ts **中。我認爲一個好的解決方案就是使用我正在使用的EventEmitter（就像一個狀態）。我的問題是：當從EventEmitter的訂閱功能被調用時，我怎麼能調用從app.ts一定#box切換功能？ – TheHeroOfTime

我剛做出另一個決定。我現在正在使用css解決方案。這可能更容易。 AnimationBuilder仍然是解決此問題的好方法。 – TheHeroOfTime

不理解'toggle'功能。不應該是相反的：'//如果是可見的，我們使它向上滑動 if（isVisible）{ 動畫 //設置初始樣式。setFromStyles（{height：'0'，width：'50％'，overflow：'hidden'}） //設置動畫結束時添加的樣式 .setToStyles（{height：'300px'}）'？ – Miquel

爲您簡單的「動畫」你只需要NG-IF：

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

~~順便提一下，Angular 2動畫還沒有發佈。~~ 動畫文檔has landed。

來源

2015-12-08 20:56:52

對不起，我忘了提，我到底想要什麼。我想在Windows 10使用切換按鈕，但類似：當您按下「視窗+ A」，它會出現在右側的側邊欄。正是我想要的網站上的動畫，當你點擊一個div容器，而不僅僅是簡單的出現和消失。。我認爲jQuery代碼將是類似的東西（僅適用於時間延遲出現） $（「DIVA」）點擊（函數（）{ $（「DIVB」）切換（1000）; }）; 那麼，你覺得有沒有在角2.0的方式來達到這個「側邊欄動畫」？ – TheHeroOfTime

@SyleKu，歡迎來到StackOverflow。正如你所看到的，明確你需要什麼幫助是非常重要的。我不知道有什麼辦法可以用你當前版本的Angular 2來做你想做的事。你必須做一些事情，比如'（click）=「animateDiv2（div2，1000）」'，然後編寫函數animateDiv2（）做什麼切換（）做 - 我假設意味着在指定的時間內修改CSS屬性值。 –

「Angular 2.0 for TypeScript」（alpha）動畫是如何工作的？

回答

相關問題