识别在 core-transitionend 中完成了哪个 core-transition

Question

这是一个显示 div 并使用 core-transition-css 元素将其移入和移出屏幕的页面。它还捕获 core-transitionend 事件，该事件在任何 core-transition 动画结束时触发。

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
  <head>
    <script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/bower_components/paper-button/paper-button.html" />
    <link rel="import" href="/bower_components/core-transition/core-transition-css.html" />
    <title>Core Transition CSS Event</title>
  </head>
  <body>  
    <polymer-element name="test-app" on-core-transitionend="{{animationCompleted}}">
        <script>
            Polymer({
                state : {"opened": false},
                transition : null,
                ready : function() {
                    var target = this.$.myDiv;
                    this.transition = this.$.centerAnimation;

                    target.removeAttribute('hidden');
                    this.transition.setup(target, this.state);
                    this.async(this.centerButtonClick, null, 100);
                },
                centerButtonClick : function() {
                    var target = this.$.myDiv;
                    if(this.transition){
                        this.transition.teardown(target);
                    }
                    this.state.opened = !this.state.opened;
                    this.transition = this.$.centerAnimation; 
                    this.transition.setup(target);
                    this.transition.go(target, this.state);
                },
                rightButtonClick : function() {
                    var target = this.$.myDiv;
                    if(this.transition){
                        this.transition.teardown(target);
                    }
                    this.state.opened = !this.state.opened;
                    this.transition = this.$.rightAnimation; 
                    this.transition.setup(target);
                    this.transition.go(target, this.state);
                },
                animationCompleted : function(e) {
                    alert('animation complete')
                }
            });
        </script>
        <template>
            <style>
                #myDiv {
                  color: white;
                  background-color: blue;
                  position: fixed;
                  top: 100px;
                  width: 100%;
                  height: 400px;
                }
            </style>
            <paper-button on-click="{{centerButtonClick}}">Center</paper-button>
            <paper-button on-click="{{rightButtonClick}}">Right</paper-button>
            <paper-button>None</paper-button>
            <div id="myDiv" hidden>It's a div</div>
            <core-transition-css id="centerAnimation" transitionType="center"></core-transition-css>
            <core-transition-css id="rightAnimation" transitionType="right"></core-transition-css>
        </template>
    </polymer-element>
    <test-app id="myTest"></test-app>
  </body>
</html>

我希望能够从事件处理程序内部判断哪个动画已完成。如果您单击页面上的前两个按钮之一，您会看到实际上有两个警报：一个用于 div 的动画，一个用于纸张按钮上波纹动画的结束（None 按钮是为了表明您会收到任何纸质按钮单击的警报，即使那些不会导致 div 动画发生的按钮也是如此。

我可能遗漏了一些东西，但我希望传递给 animationCompleted(e) 的事件对象会将 core-transition-css 元素作为其 srcElement。不幸的是，srcElement 和 target 都设置为 test-app#myTest。

此外，core-transition 的文档说 e.detail 应该包含目标节点，但是 e.detail 似乎总是在 core-transition.html 中设置为 null：

 /**
   * Called when the animation completes. This function also fires the
   * `core-transitionend` event.
   *
   * @method complete
   * @param {Node} node The animated node
   */
  complete: function(node) {
    this.fire('core-transitionend', null, node);
  },

Answer 1

好吧，我用它戳了最后 30 分钟。我认为唯一的解决方法是创建一个快速自定义元素，例如：

<polymer-element name="custom-core-transition-css" extends="core-transition-css" attributes="transitionType">
    <template>
      <link no-shim rel="stylesheet" href="/bower_components/core-transition/core-transition-overlay.css">
    </template>
    <script>
     Polymer('custom-core-transition-css', {

        complete: function(node) {
            this.fire("core-transitionend", {
                id: this.getAttribute("id"),
                transition: this.transitionStyle,
            }, node);
        }

    });
    </script>
</polymer-element>

然后只需将 core-transition-css 更改为 custom-core-transition-css:

<custom-core-transition-css id="centerAnimation" transitionType="center"></custom-core-transition-css>
<custom-core-transition-css id="rightAnimation" transitionType="right"></custom-core-transition-css>

您可以保留所有现有代码，只需通过 e.detail:

获取 transitionStyle 和 Id

animationCompleted : function(e) {
    console.log(e.detail);
}

哪个returns:

Object {id: "centerAnimation", transition: style}
Object {id: "rightAnimation", transition: style}
Object {}

希望对您有所帮助。

识别在 core-transitionend 中完成了哪个 core-transition

Identifying which core-transition has completed in core-transitionend

javascript

polymer