在設計師的聚合物中使用核心動畫頁面

Question

我正在嘗試使用設計器來解決問題。我正在嘗試在2個核心動畫頁面部分之間創建一個簡單的人臉過渡，但我不確定哪裏出錯。我使用的代碼如下。您可以將整個代碼簡單地粘貼到Designer的代碼視圖中（http://www.polymer-project.org/tools/designer/）。我只想讓這個小白方塊褪色，並且出現一個更大的白方塊。

你能幫忙嗎？

<link rel="import" href="../core-animated-pages/core-animated-pages.html"> 
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html"> 
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html"> 
<link rel="import" href="../core-animated-pages/transitions/slide-down.html"> 
<link rel="import" href="../core-animated-pages/transitions/slide-up.html"> 
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html"> 

<polymer-element name="my-element"> 

    <template> 
    <style>  
     :host { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     box-sizing: border-box; 
     } 
     #core_animated_pages { 
     width: 420px; 
     height: 582px; 
     overflow: hidden; 
     left: 270px; 
     top: 50px; 
     position: absolute; 
     background-color: rgb(238, 238, 238); 
     } 
     #core_card { 
     width: 300px; 
     height: 300px; 
     border-top-left-radius: 2px; 
     border-top-right-radius: 2px; 
     border-bottom-right-radius: 2px; 
     border-bottom-left-radius: 2px; 
     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; 
     background-color: rgb(255, 255, 255); 
     } 
     #core_card1 { 
     width: 100%; 
     height: 100%; 
     border-top-left-radius: 2px; 
     border-top-right-radius: 2px; 
     border-bottom-right-radius: 2px; 
     border-bottom-left-radius: 2px; 
     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; 
     background-color: rgb(255, 142, 129); 
     } 
    </style> 
    <core-animated-pages transitions="fade" selectedindex="{{ mySelected }}" notap id="core_animated_pages"> 
     <section id="section" layout horizontal center center-justified activ1e active> 
     <core-card id="core_card" layout vertical on-tap="{{ change }}" fade></core-card> 
     </section> 
     <section id="section1"> 
     <core-card id="core_card1" layout vertical fade></core-card> 
     </section> 
     <section id="section2"> 
     </section> 
    </core-animated-pages> 
    </template> 

    <script> 

    Polymer('my-element', { 
     change: function() { 
     mySelected = 1; 
     }, 
     mySelected: 1 
    }); 

    </script> 

</polymer-element> 

Answer 1

過渡和屬性都被稱爲cross-fade。

嘗試這樣：https://gist.github.com/sorvell/9a2e155ca0774c2611dd