如何在骨幹中進行頁面轉換？

我想用骨幹來渲染一個視圖？但我希望視圖能夠以動畫形式呈現給用戶。應該淡出然後縮放就像動畫漸變和規模在這裏： http://tympanus.net/Development/ModalWindowEffects/如何在骨幹中進行頁面轉換？

這裏是我的代碼：

if (!this.firstUseOverlayView) { 
    this.firstUseOverlayView = new NPWFirstUseView({ 
     isOverlay: true, 
     el: '.first-use-overlay' 
    }); 
} 
this.firstUseOverlayView.render();

這使得該視圖到主股利。我希望視圖在用戶看來轉換（淡入淡出和縮放）。請參閱上面的鏈接。我怎樣才能做到這一點？

來源

2016-02-24 Jasmine

我相信由於視圖是動態添加到DOM的，因此就像在其上放置CSS動畫一樣簡單。

下面是一個帶演示的JSFiddle，相關的CSS在下面（爲簡單起見，沒有供應商前綴）。

@keyframes imageFadeIn { 
    0%{opacity:0; transform: scale(0.5)} 
    100%{opacity:1; transform: scale(1)} 
} 
.first-use-overlay { 
    animation:imageFadeIn 0.3s 1 ease-out; 
}

來源

2016-02-24 20:46:11 jameson

太棒了！謝謝。如何複製關閉的動畫？如果你點擊Fade in＆Scale按鈕，它會有一個「關閉我」按鈕。如何在關閉視圖時添加相同的效果？ – Jasmine

關閉動畫稍微複雜一點。我沒有足夠強大的骨幹來說明如何做到這一點，但訣竅是添加一個類到'.first-use-overlay'，像「關閉」和一個setTimeout關閉動畫的長度（這只是與上面相反的）。在動畫完成之前，關鍵並不是從DOM中刪除視圖。 – jameson

我怎樣才能做到上述，但使用轉換呢？ – Jasmine

如何在骨幹中進行頁面轉換？

回答

相關問題