Question

我想使用英雄动画，但共享元素的目标是在自定义元素的内部，我不知道正确的语法。

传入页面中的

：

properties: {
animationConfig: {
 value: function() {
  return {
    'entry': {
      name: 'hero-animation',
      id: 'hero',
      toPage: this
     }
   }
 }
},
sharedElements: {
  value: function() {
   return {
    'hero': this.$.hero
   }
  }
 }
}

在外发页面中：

    properties: {
animationConfig: {
 value: function() {
  return {
    'exit': {
      name: 'hero-animation',
      id: 'hero',
      toPage: this
     }
   }
 }
},
sharedElements: {
  value: function() {
   return {
    'hero': this.(custom element).$.hero??????
   }
  }
 }

Answer 1

有点晚了，但由于遇到同样的问题，我想分享我的结果：

我也想知道如何在嵌入式自定义元素中添加一个按钮到我在sharedElements中的id。正如我的意图所示，聚合物中的每个元素都可以“生存”在它自己没有任何“硬编码”依赖于其他元素的情况下，我不想用document.querySelector等达到目标，因为这可能会导致错误删除包含此按钮的元素。

我尝试过的可能性和工作的可能性都在于解雇事件。

包含该按钮的自定义元素会在点击或标签上触发事件。

fireOnClick: function(e, detail) {
                    this.fire('wasclickedevent', {someProperties: ""});
                }

在“外发页面” - 英雄动画开始的页面中，我在捕获事件后动态地将“sharedElements”属性添加到我的元素中：

listeners: {
             'wasclickedevent': '_changeSharedElement'

         },
         _changeSharedElement: function(e) {
             this.sharedElements = {
                 'hero': e.target
             }
         },

多数民众赞成。英雄动画有效。要更多地分离元素，您还可以动态添加条目和退出动画，否则如果没有事件并退出页面，您将收到错误，即找不到fromPage。

希望有所帮助。

Answer 2

您的聚合物元素animationConfig属性中缺少一些代码

在传入页面

＆＃13;

Polymer({

      is: 'detail-page',

      behaviors: [Polymer.NeonSharedElementAnimatableBehavior],

      properties: {
        animationConfig: {
          value: function() {
            return {
              'entry': [{
                name: 'hero-animation',
                id: 'hero',
                toPage: this
              }, {
                name: 'fade-in-animation',
                node: this
              }],
              'exit': {
                name: 'fade-out-animation',
                node: this
              }
            }
          }
        },

        sharedElements: {
          value: function() {
            return {
              'hero': this.$.header
            }
          }
        }
      }

    });

＆＃13;

在传出页面

＆＃13;

Polymer({

    is: 'main-page',

    behaviors: [Polymer.NeonSharedElementAnimatableBehavior],

    properties: {
      animationConfig: {
        value: function() {
          return {
            'entry': {
              name: 'scale-up-animation',
              node: this
            },
            'exit': [{
              name: 'hero-animation',
              id: 'hero',
              fromPage: this
            }, {
              name: 'fade-out-animation',
              node: this
            }]
          }
        }
      },

      sharedElements: {
        value: function() {
          return {
            'hero': this.$.circle
          }
        }
      }
    }

  });

＆＃13;

您可以在自定义元素HTML结构中使用ID属性来引用自定义元素。 javascript中聚合物元素创建中的ID与聚合物元素的animationConfig和sharedElements属性相关联。在上面的示例中，自定义元素的ID属性分别为标题和圆圈。

请发布您的HTML代码，以便我们更好地了解一下。

如何使用neon-animated-pages在自定义元素上定位sharedElements

2 个答案: