Question

这是一个显示div的页面，使用core-transition-css元素在屏幕上移动它。它还捕获core-transitionend事件，该事件在任何核心转换动画结束时触发。

<!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的动画，另一个用于纸张按钮上的波纹动画结束（无按钮是在那里显示您可以获得任何纸质按钮点击的警报，即使是那些不会导致div动画发生的警告。

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

此外，核心转换的文档说e.detail应该包含目标节点，但是在core-transition.html中e.detail似乎总是设置为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);
}

返回：

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

希望有所帮助。

确定在核心转换中完成了哪个核心转换

1 个答案: