在Designer上的Polymer中使用核心动画页面

Question

I'm trying to use Designer to mess around. I'm trying to create a simple face transition between 2 core animated pages section but I'm not sure where I'm going wrong. The code I'm using is below. You can simply paste the entire code into the code view in Designer ( http://www.polymer-project.org/tools/designer/ ). I just want the small white square to fade and a bigger white square to appear.

Can you help?

<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

The transition and attribute are both called cross-fade .

Try something like this: https://gist.github.com/sorvell/9a2e155ca0774c2611dd