確定在覈心轉換終端中完成了哪個核心轉換

這是一個顯示div並使用core-transition-css元素在屏幕上和屏幕之外移動它的頁面。它還捕獲核心轉換事件，該事件在任何核心轉換動畫結束時觸發。確定在覈心轉換終端中完成了哪個核心轉換

<!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應該包含目標節點，但是e.detail似乎總是被設置爲NULL核心transition.html：

/** 
    * 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); 
    },

來源

2015-03-13 Mike Cathcart

好，我用它戳在過去的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>

然後就是改變核心 - 過渡CSS來定製核心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 {}

希望有所幫助。

來源

2015-03-13 20:55:13 flyandi

現在，我們可以建議Polymer組更改核心轉換組件並直接整合該信息。 – flyandi 2015-03-13 20:57:38

我在core-transition中創建了一個pull請求來添加這個請求。 – flyandi 2015-03-13 21:23:10

真棒，謝謝！ – 2015-03-17 19:01:50

確定在覈心轉換終端中完成了哪個核心轉換

回答

相關問題