无法复制英雄从演示过渡

Question

我在这方面相当新，一直在尝试通过示例和演示来学习。

我正在尝试处理核心动画页面，但这些概念似乎让我无法理解。

以下是我对plnkr的尝试：http://plnkr.co/edit/rHUrUEhpprTUEUJ7JrBh?p=preview

<link rel="import" href="https://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<link rel="import" href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
  <polymer-element name="test-element">
  <template>

    <style>
	paper-shadow {
	  block: inline-block;
		width: 360px;
		max-height: 600px;
		background: #FFF;
		margin: 16px;
	}
	.upper {
	  
	}
	.mid img {
	  width: 360px;
	  max-height: 360px;
	}
    </style>

    <core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">

  <section>
  
    <template repeat="{{cards as card}}">
    
  <paper-shadow>
  <section class="upper" horizontal layout hero-id="hero1" hero?="{{selectedCard === item}}">
    <h1>{{card.creator}}</h1>
  </section>
  <section class="mid" hero-id="hero2" hero?="{{selectedCard === card}}">
    <img src="{{card.image}}">
  </section>
  <section class="bottom">
    <h1>{{card.title}}</h1>
  </section>
  
  </paper-shadow>
  
  </template>
  
  </section>
  
  
  <section id="trans-card">
    <div class="dialog" layout horizontal hero-id="hero1" hero on-tap="{{transition}}">
      <div class="dialog-left" style="background:{{selectedCard.image}};" hero-id="hero2" hero></div>
      <div class="dialog-right" flex>
        <div layout horizontal center>
          <div>
            <div class="dialog-icon" style="background: #f4dv33;"></div>
          </div>
          <div class="dialog-title">{{selectedCard.creator}}</div>
        </div>
      </div>
    </div>
  </section>


    </core-animated-pages>

  </template>
  
  <script>

    Polymer('test-element', {

      page: 0,
      
      cards: [
        { title: 'Test Title 1', image: 'http://lorempixel.com/output/people-q-c-640-480-1.jpg', creator: 'random guy1'},
        { title: 'Test Title 2', image: 'http://lorempixel.com/output/people-q-c-640-480-1.jpg', creator: 'random guy2'},
        { title: 'Test Title 3', image: 'http://lorempixel.com/output/people-q-c-640-480-1.jpg', creator: 'random guy3'}
        ],


      selectedCard: null,

      transition: function(e) {
        if (this.page === 0 && e.target.templateInstance.model.item) {
          this.selectedCard = e.target.templateInstance.model.item;
          this.page = 1;
        } else {
          this.page = 0;
        }
      }
    });

  </script>
  </polymer-element>

任何建议表示赞赏。谢谢。

Answer 1

你应该看看this article

它将解释有关如何编写单个页面应用程序的许多基础知识和技巧。例如hash-routing，animate-page和ajax-calls。