ฉันจะทำให้ ‹paper-dialog modal› เคลื่อนไหวภายใน ‹header-panel› ใน Polymer 1.0 ได้อย่างไร

คำถาม

ฉันจะทำให้องค์ประกอบ <paper-dialog modal> ของฉันเคลื่อนไหวภายในองค์ประกอบ <header-panel> ที่ได้รับ รายงานข้อบกพร่องนี้ได้อย่างไร ก>?


พื้นหลัง:

  1. องค์ประกอบ <paper-dialog modal> ภายใน <header-panel> จะปรากฏอยู่เบื้องหลังโมดอล เว้นแต่คุณจะใช้วิธีแก้ปัญหาชั่วคราว (เช่น "แฮ็ก") ดูรายงานข้อบกพร่องนี้สำหรับข้อมูลเพิ่มเติม

  2. ฉันใช้ "การแก้ไขแฮ็ก" (วิธีแก้ปัญหา) บางอย่างเพื่อแก้ไขปัญหา ดูคำตอบของฉันสำหรับคำถาม Stack Overflow นี้เพื่อดูรายละเอียด รวมด้านล่างด้วย

  3. เห็นได้ชัดว่าการแก้ไขแฮ็กของฉันกำลังทำลายแอนิเมชั่น


ตัวอย่างพฤติกรรมที่ต้องการ:

ดู 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">

person Let Me Tink About It    schedule 24.07.2015    source แหล่งที่มา