简易聚合物1.0 Hero过渡
简易聚合物1.0 Hero过渡
提问于 2015-06-30 01:59:23
我正在测试霓虹灯动画页面之间的转换两个要素。但是，当我单击要转换回第一个元素时，动画无法工作。我正在跟踪在这个stackoverflow post上已经做过的事情。谢谢你的帮忙!我到目前为止所做的工作如下：
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>回答 2
Stack Overflow用户
发布于 2015-07-01 18:17:36
在您的index.html中，您将需要一些围绕_onTag1Click和_onTag2Click的大括号。这应该能解决问题
<!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>Stack Overflow用户
发布于 2015-09-07 16:44:42
element1在动画退出时定义了动画。element2在动画进入时定义了动画。这是正确的工作。如果您想从element1返回到element2，那么element2需要定义一个动画“exit”，而element1需要定义一个动画“entry”
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31128354
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号