在设计师的聚合物中使用核心动画页面

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