插入/從DOM中刪除ember視圖時的平滑動畫

我在我的Ember應用程序中使用了很多自定義視圖，這些視圖是動態插入或從DOM中移除的。插入/從DOM中刪除ember視圖時的平滑動畫

一切工作正常，除了我想插入或刪除視圖時使用平滑的jQuery動畫。例如，我有這樣的看法：

<div id="container"> 
    {{#if App.slideShow}} 
     {{view App.SlideShowView}} 
    {{/if}} 
</div>

通常情況下，容器的高度是0px，它會根據視圖的高度而變化;但是當插入視圖時，它突然發生。我想是這樣的：

$('#container').slideDown(300); 
//now the view should became visible

當視圖被刪除我想是這樣的：

//the view becomes invisble 
$('#container').slideUp(300);

什麼是建立這種灰燼中動畫的最佳方式？

來源

2013-09-26 Cereal Killer

比我最初想的容易; 就足夠了動畫外包裝的div（容器），而不是動畫視圖本身

didInsertElement: function() { 
    var that = this; 
    $('#container').animate({height: 364}, 300, function(){ 
     that.activateSlide(); //call method to activate jquery plugin 
    }); 

}, 
willDestroyElement: function() { 
    $('#container').animate({height: 0}, 300); 
}

以這種方式，「容器」的如果視圖是或不是在DOM尺寸沒有空調; 感謝您提供ember-animated-outlet插件，即使我認爲這對特定的任務來說並不有用，它似乎是一項很好的工作;在任何情況下，我更喜歡上述解決方案，因爲是輕量級的...

來源

2013-09-26 14:56:05

雖然在'willDestroyElement'內使用JQuery的動畫效果將不起作用。它是異步的，'destroyElement'只等待'willDestroyElement'完成。 – shime

是的，它是異步的，但是因爲容器的尺寸沒有被調節，如果視圖是或不在DOM中的，當willDestroyElement觸發時，它被執行的動畫;如果視圖在動畫結束之前被刪除並不重要; –

哦，是的。重讀後有意義。我試圖找到一個適用於'this。$（）'的解決方案。 – shime

在App.SlideShowView中，您可以使用didInsertElement和willDestroyElement掛鉤觸發動畫。你可能想要在視圖的主DOM元素上觸發動畫。

App.SlideShowView = Ember.View.extend({ 
    didInsertElement : function(){ 
    this.$().slideDown(300); 
    }, 
    willDestroyElement : function(){ 
    this.$().slideUp(300); 
    } 
});

另一種選擇是Ember Animated Outlet，但它的目的是動畫從路線到路線的過渡動畫。看起來你並不是真的在做「Ember Way」，所以它可能不適合你。

https://github.com/billysbilling/ember-animated-outlet

來源

2013-09-26 06:25:39

你測試過這個嗎？我懷疑刪除動畫將工作。它將在DOM元素上開始動畫，但Ember將在動畫完成之前銷燬DOM元素。 – mavilein

是的，正如馬維林所說，它不起作用;當視圖已經被渲染時，slideDown動畫被執行，因此無用;對於slideUp來說也是一樣，這是在視圖被銷燬之後執行的。 –

-1

此刻視圖渲染不assync，這樣你就可以有這樣一些問題：對已移除的對象CSS過渡，因爲CSS過渡是assync。我建議你使用ember-animated-outlet。並更改您的模板使用animatedOutlet而不是條件。

我希望它有幫助

來源

2013-09-26 14:17:54

插入/從DOM中刪除ember視圖時的平滑動畫

回答

相關問題