Как мне анимировать модальное окно «бумажный диалог» в «панели заголовка» в Polymer 1.0?

Вопрос

Как мне анимировать элемент <paper-dialog modal> внутри элемента <header-panel>, учитывая отчет об ошибке?


Предыстория:

  1. Элементы <paper-dialog modal> внутри <header-panel> отображаются за их модальным фоном, если вы не реализуете обходной путь (например, «взлом»). Дополнительную информацию см. в этом отчете об ошибке.

  2. Я реализовал некое «хак-фикс» (обходной путь) для решения проблемы. Подробности смотрите в моем ответе на этот вопрос о переполнении стека. Также включены ниже.

  3. Судя по всему, мой хак-фикс ломает анимацию.


Пример желаемого поведения:

см. этот JS Bin для примера поведения анимации, которое я ищу. (Внимание пользователей Safari: используйте вместо этого Chrome)


Hack-Fix:

Во-первых, добавьте эту функцию в пользовательский элемент:

// 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">

person Let Me Tink About It    schedule 24.07.2015    source источник