簡單的聚合物1.0英雄過渡
[英]Simple Polymer 1.0 Hero Transition
問題描述
我正在測試霓虹燈動畫頁面，以便在兩個元素之間進行過渡。 我可以過渡到第二個元素，但是，當我單擊以過渡回第一個元素時，動畫不起作用。 我正在關注這個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 個解決方案
解決方案1
0 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>
解決方案2
0 2015-09-07 16:44:42
element1在退出時定義動畫。 element2定義了進入時的動畫。 正常工作。 如果要從element2動畫化回 element1，則element2需要定義一個動畫“退出”，element1需要定義一個動畫“ entry”
聚合物1.0中的英雄動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.