材質設計，對網絡

（對不起，我不能提供什麼，我問的任何代碼，因爲我真的不知道從哪裏開始。）材質設計，對網絡

關於Meaningful Transitions point in the Material design guidelines有意義的轉變。

我非常有興趣在我的web應用程序中創建這樣的平滑過渡（especially the one where the profile picture goes from an activity to another），但我不知道如何使用html做到這一點？

CSS3的過渡足以做到這一點（哪種樣式屬性應該我用於直接移動一個元素）？
我應該使用JS/Dart來移動使用怪異座標系統的「共享視圖元素」嗎？
它可以在動態/滾動佈局上工作，還是應該忘記它？
是否有任何提示在平滑過渡中直觀地將容器中的節點移動到另一個容器？

簡而言之，HTML是否準備好了這樣的東西（任何代碼/文檔將不勝感激）？我們是否應該等一些聚合物工具來做到這一點？或者我們不應該在網上做這個？

來源

2014-07-01 Anthony Bobenrieth

退房聚合物核心動畫的頁面元素https://elements.polymer-project.org/elements/neon-animation

他們有一些非常相似的有意義的過渡https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

。「圖標來頂吧」演示很好的演示大概是最相似的，你所引用的一個（你可以查看源代碼，看看使用的聚合物Web組件，沿瓦/必要的CSS & JS

您可以通過鮑爾導入到項目中：

bower install Polymer/core-animated-pages

，敷用你的元素，並與像

這裏的屬性定義的轉變是爲跨衰落例子代碼：

<style> 
#hero1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 300px; 
    height: 300px; 
    background-color: orange; 
} 
#hero2 { 
    position: absolute; 
    top: 200px; 
    left: 300px; 
    width: 300px; 
    height: 300px; 
    background-color: orange; 
    } 
    #bottom1, #bottom2 { 
    position: absolute; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    height: 50px; 
    } 
    #bottom1 { 
    background-color: blue; 
    } 
    #bottom2 { 
    background-color: green; 
    } 
</style> 
// hero-transition and cross-fade are declared elsewhere 
<core-animated-pages transitions="hero-transition cross-fade"> 
     <section id="page1"> 
    <div id="hero1" hero-id="hero" hero></div> 
    <div id="bottom1" cross-fade></div> 
    </section> 
    <section id="page2"> 
    <div id="hero2" hero-id="hero" hero></div> 
    <div id="bottom2" cross-fade></div> 
    </section> 
</core-animated-pages>

來源

2014-08-26 15:45:33

您可能希望添加鏈接中的一些關鍵數據，因爲只有鏈接回答可能會變得無關緊要，因爲他們轉發的頁面會脫機任何原因。 – talegna

Thx for tip @talegna，已更新 –

真棒，這就是我一直在尋找的！謝謝！ :) –

就我所知，聚合物應該能夠做到這一切。如果還沒有，它應該能夠很快。

聚合物背後的基本思想是允許您在所有設備（網絡，計算機，機器人）上製作一致的界面。所以如果Android L可以完成這些轉換，那麼他們肯定意味着聚合物也具備這種能力。

來源

2014-07-01 20:39:12 cnsumner

聚合物不會做這些事情。這完全是HTML + CSS + JavaScript。你可以在沒有聚合物的情況下做所有這些。

所有聚合物都可以，是否允許您將這些東西封裝在自定義元素中。

核心元素和紙元素是一些例子。您可以自己構建這些元素，或者克隆並修改/擴展它們。

來源

2014-07-02 13:29:15

+1 @Vloz：與Chrome瀏覽器開發工具，你可以看到動畫的CSS並激活「顯示用戶代理陰影DOM」以查看聚合物元素 – SnowBallz

材質設計，對網絡

回答

相關問題