使用核心页面，是否存在页面加载事件

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

> 根据核心动画页面文档 （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
-->