简单的聚合物1.0英雄过渡
[英]Simple Polymer 1.0 Hero Transition
问题描述
I am testing out neon-animated-pages to transition between two elements. 
我正在测试霓虹灯动画页面，以便在两个元素之间进行过渡。 I have the transition to the second element working, however, when i click to transition back to the first element the animation doesn't work. 我可以过渡到第二个元素，但是，当我单击以过渡回第一个元素时，动画不起作用。 I am following what has already been done on this stackoverflow post . 我正在关注这个stackoverflow post上已经完成的工作。 Thanks for your help! 谢谢你的帮助！ Here's what I have working so far: 到目前为止，这是我的工作：
index.html 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 on-tag1-click="_onTag1Click">
</name-tag>
<name-tag1 on-tag-click="_onTag2Click">
</name-tag1>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onTag1Click = function(event) {
console.log("Square clicked");
this.$.pages.selected = 1;
};
scope._onTag2Click = function(event) {
this.$.pages.selected = 0;
};
</script>
element1.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;"> HEY</div>
</template>
</dom-module>
<script>
Polymer({
is: "name-tag",
behaviors: [
Polymer.NeonAnimatableBehavior
],
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
}
}
}
},
listeners: {
'click': '_onClick'
},
_onClick: function(event) {
var target = event.target;
console.log("ELE1 "+target);
this.fire('tag1-click');
}
});
</script>
element2.html 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;">YO</div>
</template>
</dom-module>
<script>
Polymer({
is: "name-tag1",
behaviors: [
Polymer.NeonAnimatableBehavior
],
properties: {
animationConfig: {
value: function() {
return {
// the incoming page defines the 'entry' animation
'entry': {
name: 'hero-animation',
id: 'hero',
toPage: this
}
}
}
},
sharedElements: {
type: Object,
value: function() {
return {
'hero': this.$.card,
}
}
}
},
listeners: {
'click': '_onClick'
},
_onClick: function(event) {
var target = event.target;
console.log("ELE2 "+target);
this.fire('tag2-click');
}
});
</script>
2 个解决方案
解决方案1
0 2015-07-01 18:17:36
In your index.html you will need some curly braces around your _onTag1Click and _onTag2Click . 在index.html中，您需要在_onTag1Click和_onTag2Click周围使用花括号。 That should fix it 那应该解决它
<!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 on-tag1-click="{{_onTag1Click}}">
</name-tag>
<name-tag1 on-tag-click="{{_onTag2Click}}">
</name-tag1>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onTag1Click = function(event) {
console.log("Square clicked");
this.$.pages.selected = 1;
};
scope._onTag2Click = function(event) {
this.$.pages.selected = 0;
};
</script>
解决方案2
0 2015-09-07 16:44:42
element1 defines an animation as it exits. element1在退出时定义动画。 element2 defines an animation as it enters. element2定义了进入时的动画。 that is working correctly. 正常工作。 if you want to animate back to element1 from element2, then element2 needs to define an animation 'exit', and element1 needs to define an animation 'entry' 如果要从element2动画化回 element1，则element2需要定义一个动画“退出”，element1需要定义一个动画“ entry”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.