问捕获核心-从核心过渡-css
EN

Stack Overflow用户

提问于 2015-03-04 19:01:58

回答 1查看 193关注 0票数 1

我试图使用核心转换-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>

javascript

polymer

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-12 20:03:31

算出我的例子犯了两个错误。第一个是将一个布尔值作为第二个参数传递给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>

动画发生，事件被捕获。然而，由于纸按钮也有动画，有两个核心过渡结束事件触发。现在，我看不到区分这两种情况的简单方法，尽管您可以查看e.path。我将就此单独提出一个问题。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28862692

复制

相似问题

问捕获核心-从核心过渡-css
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问捕获核心-从核心过渡-cssEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问捕获核心-从核心过渡-css
EN