如何在Polymer 1.0中的<header-panel>中为<paper-dialog modal =“”>设置动画？

Question

问题

  

如何在给定this bug report的<paper-dialog modal>元素中为<header-panel>元素设置动画？

<小时/> 的背景

{li>

<paper-dialog modal>中的<header-panel>元素出现在其模态背景后面，除非您实施变通方法（即＆＃34; hack＆＃34;）。 See this bug report了解更多信息。

1. 我实施了某个＆＃34; hack-fix＆＃34; （解决方法）解决问题。有关详细信息，请参阅我对this Stack Overflow question的回答。还包括在下面。

2. 显然，我的黑客攻击正在打破动画。

<小时/> 所需行为的示例：

See this JS Bin获取我寻求的动画行为的示例。 （注意Safari用户：改用Chrome）

<小时/> 的哈克-修正：

首先，将此功能添加到自定义元素：

// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
  if (e.target.withBackdrop) {
    e.target.parentNode.insertBefore(e.target._backdrop, e.target);
  }
},

然后将on-iron-overlay-opened="patchOverlay"添加到<paper-dialog>，如下所示：

<paper-dialog on-iron-overlay-opened="patchOverlay">