Hero Animation in polymer 1.0

Sto cercando di implementare animazioni eroe (da elementi neon) per animare su un altro elemento personalizzato (da element1.html a element2.html) facendo clic su un quadrato rosso.Hero Animation in polymer 1.0

ho scritto tutto ciò che è documentato qui: https://github.com/PolymerElements/neon-animation#shared-element

ma non succede nulla al clic. Per favore guidami sull'implementazione di questo.

Qui sono i miei file:

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>

Grazie in anticipo.

fonte

2015-06-12 Manik Arora

Si sta utilizzando un comportamento errato. NeonAnimationRunnerBehavior è per i componenti che riproducono o eseguono l'animazione al loro interno. Un ottimo esempio sarà il componente neon-animated-pages, implementa NeonAnimationRunnerBehavior perché esegue animazioni all'interno.
Ogni articolo inserito in deve implementare NeonAnimatableBehavior, non NeonAnimationRunnerBehavior.
Per eseguire l'animazione, dobbiamo passare in qualche modo tra i nostri componenti animabili. L'attributo "selezionato" di pagine animate al neon ci aiuta in questo. Quando selected = "0"neon-animated-pages mostra name-tag, quando selected = "1"neon-animated-pages mostra il componente name-tag1.
Si desidera modificare la visualizzazione dopo clic, ma non vedo alcun ascoltatore di eventi di clic. Aggiungi eventi click che cambieranno il valore dell'attributo selezionato e funzionerà.

fonte

2015-06-16 12:28:36

Hero Animation in polymer 1.0

risposta

Problemi correlati