从 core-transition-css 捕获 core-transitionend

Question

我正在尝试使用 core-transition-css 元素将 div 滑动到屏幕外，然后捕获过渡结束事件。在下面的代码中，动画有效但回调永远不会触发。谁能告诉我我错过了什么？

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
  <head>
    <title>Test page</title>
    <link rel="import" href="../components/core-transition/core-transition-css.html" />
    <link rel="import" href="../components/paper-button/paper-button.html" />
  </head>
  <body fullbleed layout vertical>  
    <polymer-element name="test-app">
        <script>
            var transition;
            Polymer({
                ready: function() {
                },
                buttonClick : function() {
                    var target = this.$.myDiv;
                    var meta = document.createElement('core-meta');
                    meta.type = 'transition';
                    transition = meta.byId('core-transition-right');
                    transition.addEventListener('core-transitionend', this.animationComplete);
                    transition.setup(target);
                    transition.go(target, true);
                },
                animationComplete : function(e) {
                    alert('complete')
                }
            });
        </script>
        <template>
            <paper-button on-click="{{buttonClick}}">Animate</paper-button>
            <div id="myDiv" style="color: white; background-color: blue">It's a div</div>
        </template>
    </polymer-element>
    <test-app id="myTest"></test-app>
  </body>
</html>

Answer 1

发现我在示例中犯了两个错误。第一个是将布尔值作为第二个参数传递给 transition.go()，它应该是一个带有名为 "opened" 的布尔值属性的对象。

其次，我将事件侦听器置于转换状态而不是 test-app 元素。

这是一个工作版本：

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
  <head>
    <title>Test page</title>
    <script src="../components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../components/core-transition/core-transition-css.html" />
    <link rel="import" href="../components/paper-button/paper-button.html" />
  </head>
  <body fullbleed layout vertical>  
    <polymer-element name="test-app">
        <script>
            Polymer({
                buttonClick : function() {
                    var target = this.$.myDiv;
                    var meta = document.createElement('core-meta');
                    meta.type = 'transition';
                    var transition = meta.byId('core-transition-right');
                    this.addEventListener('core-transitionend', this.animationComplete);
                    transition.setup(target);
                    transition.go(target, {"opened": false});
                },
                animationComplete : function(e) {
                    alert('complete')
                }
            });
        </script>
        <template>
            <paper-button on-click="{{buttonClick}}">Animate</paper-button>
            <div id="myDiv" style="color: white; background-color: blue">It's a div</div>
        </template>
    </polymer-element>
    <test-app id="myTest"></test-app>
  </body>
</html>

动画发生并且事件被捕获。然而，由于 paper-button 也有动画，因此触发了两个 core-transitionend 事件。目前我没有看到区分两者的简单方法，但您可以查看 e.path。我将为此打开一个单独的问题。

从 core-transition-css 捕获 core-transitionend

Capturing core-transitionend from core-transition-css

javascript

polymer