聚合物1.0中的英雄动画
聚合物1.0中的英雄动画
提问于 2015-06-12 11:26:56
我试图通过单击一个红色方块来实现英雄动画(从霓虹灯元素)到另一个自定义元素(元素1.html到元素2.html)的动画。
我写了这里记录的所有东西：https://github.com/PolymerElements/neon-animation#shared-element
但点击后什么都不会发生。请指导我如何实施这一点。
这是我的档案：
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>提前谢谢。
回答 1
Stack Overflow用户
发布于 2015-06-16 12:28:36
- 你使用了错误的行为。
NeonAnimationRunnerBehavior是用于在自己内部播放或运行动画的组件。很好的例子是neon-animated-pages组件，它实现NeonAnimationRunnerBehavior，因为它在里面运行动画。 - 放置在
neon-animated-pages中的每一项都必须实现NeonAnimatableBehavior，而不是NeonAnimationRunnerBehavior。 - 要运行动画，我们必须以某种方式在可动画组件之间切换。霓虹灯动画页面的“精选”属性帮助我们做到这一点。当
selected = "0"neon-animated-pages向您显示name-tag时，当selected = "1"neon-animated-pages显示name-tag1组件时。 - 您希望在单击后更改视图，但我没有看到任何单击事件侦听器。添加单击事件，这将改变选定的属性值，它将工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30801922
复制相关文章
相似问题
腾讯云开发者
