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功能，并且动画不起作用。< / p>

见小提琴：

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

Answer 1

问题在于sharedElements＆＃39;函数在创建/附加时进行评估，因此不会跟踪更改id s。

我找到了一种方法来解决这个问题，只需在点击事件发生后立即设置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/

如何动态定义英雄＆＃39;在＆＃39; neon-animated-pages＆＃39;？

1 个答案: