Menu
I am trying to implement hero animation(from neon-elements) to animate to another custom element(element1.html to element2.html) by clicking a red square.
I wrote everything that is documented here: https://github.com/PolymerElements/neon-animation#shared-element
But nothing happens on click. Please guide me on implementing this.
Here are my files:
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>
Thanks in Advance.
428
You are using wrong behavior. NeonAnimationRunnerBehavior is for components who play or run the animation inside themselves. Very good example will be neon-animated-pages component, it implements NeonAnimationRunnerBehavior because it runs animations inside.
Every item which placed in neon-animated-pages has to implement NeonAnimatableBehavior, not NeonAnimationRunnerBehavior.
To run the animation we have to switch somehow between our animatable components. The "selected" attribute of neon-animated-pages help us with that. When selected = "0" neon-animated-pages shows you name-tag, when selected = "1" neon-animated-pages shows you name-tag1 component.
You want to change view after click but I don't see any click event listeners. Add click events which will change selected attribute value and it'll work.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
