Question

抓住元素paper-ripple以附加动画结束事件的事件侦听器的最佳方法是什么？这个元素将重复一次。我试图让Polymer.dom(event).localTarget;的孩子来，但没有成功。 on-tap需要保留在父级中。

    <div on-tap="goToSingleListing" data-listingID="[[url.listing_id]]">
     <paper-ripple></paper-ripple>


  ...

  goToSingleListing: function(event) {
    var el = Polymer.dom(event).localTarget;
    var firstChildElementName = Polymer.dom(el).firstChild;

     ...
    firstChildElementName.addEventListener('transitionend', ()=> {
      page(url);
    });

Answer 1

您可以直接在<paper-ripple>上使用annotated event listener transitionend event，而不是尝试从tap事件处理程序获取对<paper-ripple>的引用}。

// dom-module template
<template is="dom-repeat" items="[[items]]">
  <div on-tap="...">
    <paper-ripple on-transitionend="_onItemTransitionEnd"></paper-ripple>
  </div>
</template>

// dom-module script
Polymer({
  ...
  _onItemTransitionEnd: function(e) {
    ...
  }
}

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _onItemTap: function(e) {
      console.log('tap', e.model.index);
    },
    _onItemTransitionEnd: function(e) {
      console.log('transitionend', e.model.index);
    }
  });
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-ripple/paper-ripple.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <template is="dom-repeat" items="[1,2,3,4]">
        <div on-tap="_onItemTap">
          <h2>Item [[item]]</h2>
          <paper-ripple on-transitionend="_onItemTransitionEnd"></paper-ripple>
        </div>
      </template>
    </template>
  </dom-module>
</body>

＆＃13;

codepen

从Polymer.dom获取子元素（事件）

1 个答案: