[英]Hero Animation in polymer 1.0
我試圖通過單擊一個紅色方塊來實現英雄動畫(從neon-elements)動畫到另一個自定義元素(element1.html到element2.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>
提前致謝。
你使用的是錯誤的行為。 NeonAnimationRunnerBehavior
適用於在自己內部播放或運行動畫的組件。 非常好的例子是neon-animated-pages
組件,它實現了NeonAnimationRunnerBehavior
因為它在里面運行動畫。
放置在neon-animated-pages
每個項目都必須實現NeonAnimatableBehavior
,而不是NeonAnimationRunnerBehavior
。
要運行動畫,我們必須以某種方式在我們的動畫組件之間切換。 霓虹動畫頁面的“選定”屬性可以幫助我們。 當selected = "0"
neon-animated-pages
顯示name-tag
,當selected = "1"
neon-animated-pages
顯示name-tag1
組件。
您希望在單擊后更改視圖,但我沒有看到任何單擊事件偵聽器。 添加將更改所選屬性值的單擊事件,它將起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.