使用核心頁面，是否有頁面加載事件？

Question

在一個core-(animated)-pages集合中，我需要我選擇的頁面對它成為所選頁面的事實做出反應。 我不知道該在哪發生什么事情。 嘗試了一個簡單的load但是沒有被調用。

如果默認情況下不存在此類事件，那么on-core-select能否以某種方式觸發my-element的事件以使其知道應加載其數據？

            <core-animated-pages id="appPages" selected="{{selectedPage}}" valueattr="data-name" transitions="slide-from-right" on-core-select="{{pageSelected}}">
                <my-page data-name="Round 1" color="red">
                    <div>Page 1</div>
                </my-page>
                <my-page data-name="Round 2" color="yellow">
                    <div>Page 2</div>
                </my-page>
                <my-page data-name="Round 3" color="grey">
                    <div>Page 3</div>
                </my-page>
            </core-animated-pages>



<polymer-element name="my-page" attributes="color">
<template>
    <section data-name="Round 1" layout vertical center center-justified style="background:{{color}};">
        <content></content>
    </section>
</template>
<script>
    Polymer('my-page', {
        load: function (e) {
            console.info(e)
        }
    });
</script>

Answer 1

根據core-animated-pages文檔（ https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ），該元素采用您的轉換名稱並查找包含以下內容的元素相同的詞。 例如：

<core-animated-pages transitions="hero-transition">
   <section id="page1">
     <div id="hero1" hero-id="hero" hero></div>
   </section>
   <section id="page2">
      <div id="hero2" hero-id="hero" hero></div>
  </section>
</core-animated-pages>

這應該有助於您避免編寫邏輯來顯示/隱藏元素。 該文檔還顯示轉換發生之前和之后觸發的事件。

Answer 2

似乎有兩個事件在不同的時間觸發：

• core-animated-pages-transition-prepare和
• core-animated-pages-transition-end 。

從https://github.com/Polymer/core-animated-pages ：

<!--
  Fired before a page transition occurs. Both pages involved in the transition are visible when
  this event fires. This is useful if there is something the client needs to do when a page becomes visible.

  @event core-animated-pages-transition-prepare
-->

<!--
  Fired when a page transition completes.

  @event core-animated-pages-transition-end
-->