如何在“霓虹动画页面”中动态定义“英雄”？

Question

我在一个页面中有两个按钮，我希望单击的按钮在过渡到另一个页面时扮演英雄角色。

假设我有第一页：

<dom-module id="first-page">

  <style>
  .hero_from_1 {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: cornflowerblue;
  }
  .hero_from_2 {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: cornflowerblue;
  }
  </style>

  <template>
    <paper-button class="hero_from_1" raised on-tap="tapHandler_1">First Hero</paper-button>
    <paper-button class="hero_from_2" raised on-tap="tapHandler_2">Second Hero</paper-button>
  </template>

  <script>

    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'first-page',

        tapHandler_1: function(ev){
          document.getElementsByClassName('hero_from_1')[0].setAttribute('id','hero_from');
          document.getElementsByClassName('hero_from_2')[0].removeAttribute('id');
          this.fire('second-page');
        },

        tapHandler_2: function(ev){
          document.getElementsByClassName('hero_from_1')[0].removeAttribute('id');
          document.getElementsByClassName('hero_from_2')[0].setAttribute('id','hero_from');
          this.fire('second-page');
        },

        behaviors: [Polymer.NeonSharedElementAnimatableBehavior],
        properties: {
          animationConfig: {
            value: function(){
              return {
                'entry':{
                  name: 'fade-in-animation',
                  node: this
                },
                'exit':[{
                  name: 'hero-animation',
                  id: 'hero',
                  fromPage: this
                },{
                  name: 'fade-out-animation',
                  node: this
                }]
              }
            }
          },
          sharedElements: {
            value: function() {
              return {
                'hero': this.$.hero_from // changes in ids do not affect hero!!!
              }
            }
          }
        }
      })
    });

  </script>

</dom-module>

具有标准的 sharedElements 属性，如项目页面 (https://elements.polymer-project.org/guides/using-neon-animations#page-transitions) 中所述。

问题是即使我在单击或点击事件后立即交换按钮的id，更改也不会传播到sharedElements 函数，并且动画不起作用。

见小提琴：

http://jsfiddle.net/ferdinandkraft/qzxzeb1u/

Answer 1

问题在于 sharedElements' 函数是在创建/附加时评估的，因此它不会跟踪更改 ids。

我找到了解决这个问题的方法，只需在点击事件之后设置sharedElements 属性，就像任何其他属性一样：

<dom-module id="first-page">

  <style>
  .hero_from_1 {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: cornflowerblue;
  }
  .hero_from_2 {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: cornflowerblue;
  }
  </style>

  <template>
    <paper-button class="hero_from_1" raised on-tap="tapHandler">First Hero</paper-button>
    <paper-button class="hero_from_2" raised on-tap="tapHandler">Second Hero</paper-button>
  </template>

  <script>

    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'first-page',

        tapHandler: function(ev){
          this.sharedElements = {'hero': ev.target};  /////// here!!!
          this.fire('second-page');
        },

        behaviors: [Polymer.NeonSharedElementAnimatableBehavior],
        properties: {
          animationConfig: {
            value: function(){
              return {
                'entry':{
                  name: 'fade-in-animation',
                  node: this
                },
                'exit':[{
                  name: 'hero-animation',
                  id: 'hero',
                  fromPage: this
                },{
                  name: 'fade-out-animation',
                  node: this
                }]
              }
            }
          },
          /* sharedElements removed! */
        }
      })
    });

  </script>

</dom-module>

请注意，ev.target 将是被点击的按钮，因此单个 tapHandler 就可以完成这项工作！

见小提琴：

http://jsfiddle.net/ferdinandkraft/b1sw1q2o/