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

想通了我在我的例子中犯了两个错误。第一个是将boolean作为第二个参数传递给transition.go（），它应该是一个具有名为“opened”的布尔属性的Object。

其次，我将事件监听器放在转换而不是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>

动画发生并捕获事件。但是，由于纸质按钮也具有动画效果，因此有两个核心转换事件被触发。现在我没有看到一个简单的方法来区分这两者，虽然你可以看看e.path。我将为此开一个单独的问题。

从core-transition-css捕获核心转换端

1 个答案: