Использование Core Animated Pages в Polymer on Designer

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