Chuyển đổi lõi polymer cho các trang hoạt ảnh có nội dung danh sách lõi

Question

Tiếp theo từ this question Tôi tiếp tục phát triển demo messages example nhằm cố tạo chuyển tiếp trang giữa hai trang với danh sách lõi.

Tôi đang cố gắng để đạt được những điều sau đây:

• chuyển anh hùng trên fabs trên mỗi trang
• chuyển tiếp các slide (theo hướng ngược nhau) trên hai trang
• này để làm việc như mong đợi không vấn đề nơi bạn được cuộn trên các danh sách

Lưu ý các trang thay đổi khi nhấp vào fabs.

Tôi đã có một số thành công nhưng không thể làm cho nó hoạt động chính xác ở tất cả các khía cạnh có thể được nhìn thấy từ jsbin của tôi.

Tôi nghi ngờ một phần của vấn đề liên quan đến việc định cỡ các div bọc các danh sách lõi. Tôi không thể tìm ra cách để kích thước chúng nhưng tôi tin rằng chúng rất quan trọng đối với hiệu ứng chuyển tiếp.

Cũng lưu ý rằng các padding linh hoạt ở hai bên của danh sách cũng rất quan trọng để bảo tồn (tương tự như những gì tồn tại trên hộp thư thực)

Answer 1

Thứ nhất, không có slide-from-left chuyển đổi. Bạn sẽ cần xóa mọi thứ liên quan đến nó trong mã của bạn.

Tôi nhận thấy rằng hero-transition không hoạt động tốt với quá trình chuyển đổi slide-from-right. Một giải pháp thay thế có thể là, bao gồm hai số paper-fab trong một số khác core-animated-pages.

<core-animated-pages id="pages" selected="{{selected}}" 
         transitions="slide-from-right" 
         on-show-snooze="{{showSnooze}}" on-show-inbox="{{showInbox}}" 
         content 
         layout vertical flex> 
     <inbox-editor scrolltarget="{{$.panel.scroller}}" flex> 
     </inbox-editor> 
     <snooze-editor scrolltarget="{{$.panel.scroller}}" flex> 
     </snooze-editor> 
    </core-animated-pages> 
</core-scroll-header-panel> 

<core-animated-pages selected="{{selected}}" transitions="hero-transition" style="position:absolute; bottom:48px;"> 
    <section> 
     <paper-fab class="fab-yellow" icon="add" hero hero-id="primary" 
        on-tap="{{showSnooze}}"> 
     </paper-fab> 
    </section> 

    <section> 
     <paper-fab class="fab-red" icon="done" hero hero-id="primary" 
        on-tap="{{showInbox}}"> 
     </paper-fab> 
    </section> 
</core-animated-pages> 

Vui lòng xem điều này jsbin để tham khảo. Chú ý rằng di chuyển của paper-fab giống như chúng hoạt ảnh với chuyển đổi slide (vì hero-transition làm động hình dạng và vị trí giữa các phần tử, trong trường hợp này, quá trình chuyển đổi hình ảnh động sẽ giống hệt với một hình ảnh slide)! Vì vậy, có thể, bạn không cần phải áp dụng các hero-transition ở tất cả?