0
我正在测试霓虹动画页面以在两个元素之间转换。然而，当我点击转换回第一个元素时，动画不起作用。我正在关注已经完成的这个stackoverflow post。 感谢您的帮助！ 这是我迄今为止的工作：简单聚合物1.0英雄过渡
的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
<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
<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>
嘿为响应感谢，但残疾的单击事件。英雄动画对大元素精美地起作用。这是当我点击试图让它动画回到不起作用。 –
user1026498
看起来像是在您的名称tag1定义中触发'tag2-click'事件，但您正在监听index.html中的'on-tag-click'。尝试将其更改为'on-tag2-click' –
谢谢我想如果我发布了正确的代码，这将有所帮助。仍然是同样的行为。上的点击事件会导致元素显示，但没有英雄转场。它只显示，然后隐藏。 –
user1026498