英雄動畫聚合物1.0

我試圖通過點擊紅色方塊來實現英雄動畫（從霓虹燈元素）到另一個自定義元素（element1.html到element2.html）的動畫。英雄動畫聚合物1.0

我寫的記錄在這裏的一切： https://github.com/PolymerElements/neon-animation#shared-element

但沒有任何反應上點擊。請指導我執行此操作。

這裏是我的文件：

的index.html

<!DOCTYPE html> 
<html> 

<head> 
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">  </script> 
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html"> 
<link rel="import" href="bower_components/neon-animation/neon-animations.html"> 
<link rel="import" href="element1.html"> 
<link rel="import" href="element2.html"> 
</head> 

<body> 
<template is="dom-bind"> 
    <neon-animated-pages id="pages" selected="0"> 
     <name-tag> 
     </name-tag> 
     <name-tag1> 
     </name-tag1> 
    </neon-animated-pages> 
</template> 
</body> 

</html>

element1.html

 <link rel="import" href="bower_components/polymer/polymer.html"> 

    <link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html"> 
    <dom-module id="name-tag"> 
     <template> 

      <div id="hero" style="background:red; width:100px; height:100px; position:absolute; left:100px; top:50px;"></div> 
     </template> 
    </dom-module> 
    <script> 
    Polymer({ 
     is: "name-tag", 
     behaviors: [ 
      Polymer.NeonAnimationRunnerBehavior 
     ], 
     properties: { 
      animationConfig: { 
       value: function() { 
        return { 
         // the outgoing page defines the 'exit' animation 
         'exit': { 
          name: 'hero-animation', 
          id: 'hero', 
          fromPage: this 
         } 
        } 
       } 
      }, 
      sharedElements: { 
       value: function() { 
        return { 
         'hero': this.$.hero 
        } 
       } 
      } 
     } 

    }); 
    </script>

element2.html

 <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html"> 
    <dom-module id="name-tag1"> 
     <template> 
      <div id="card" style="background:red; width:200px; height:200px; position:absolute; left:300px; top:100px;"></div> 
     </template> 
    </dom-module> 
    <script> 
    Polymer({ 
     is: "name-tag1", 
     behaviors: [ 
      Polymer.NeonAnimationRunnerBehavior 
     ], 
     properties: { 
      sharedElements: { 
       type: Object, 
       value: function() { 
        return { 
         'hero': this.$.card, 

        } 
       } 
      }, 
      animationConfig: { 
       value: function() { 
        return { 
         // the incoming page defines the 'entry' animation 
         'entry': { 
          name: 'hero-animation', 
          id: 'hero', 
          toPage: this 
         } 
        } 
       } 
      }, 

     } 
    }); 
    </script>

在此先感謝。

來源

2015-06-12 Manik Arora

您正在使用錯誤的行爲。 NeonAnimationRunnerBehavior適用於在自己內部播放或運行動畫的組件。很好的例子是neon-animated-pages組件，它實現了NeonAnimationRunnerBehavior，因爲它裏面運行着動畫。
放置在neon-animated-pages中的每個物品必須實施NeonAnimatableBehavior而不是NeonAnimationRunnerBehavior。
要運行動畫，我們必須在我們的動畫組件之間切換。 霓虹動畫頁面的「選定」屬性幫助我們。當selected = "0"neon-animated-pages顯示你name-tag，當selected = "1"neon-animated-pages顯示你name-tag1組件。
您想要在點擊後更改視圖，但我沒有看到任何點擊事件偵聽器。添加點擊事件將改變選定的屬性值，它會起作用。

來源

2015-06-16 12:28:36

英雄動畫聚合物1.0

回答

相關問題