[英]Polymer Neon-Animation: How to use cascaded-animation and hero-animation together?
I have a small application that uses a cascaded-animation
AND a hero-animation
together here . 我有一个使用一个小的应用
cascaded-animation
和一个hero-animation
一起在这里 。
The problem is that my main element is set to visibility hidden, like the load
demo in the official documentation 问题是我的主要元素设置为隐藏可见性,如官方文档中的
load
演示
<style>
:host {
display: block;
visibility: hidden;
}
</style>
The index.html
listens to the WebComponentsReady
event to call a show
function on my library-element
: index.html
侦听WebComponentsReady
事件以在我的library-element
上调用show
函数:
<script>
document.addEventListener('WebComponentsReady', function () {
document.querySelector('library-element').show();
});
</script>
The show
method then makes the library-element visible
and calls the animation: 然后,
show
方法使library-element visible
并调用动画:
show: function () {
this.style.visibility = 'visible';
this.playAnimation('entry');
}
The problem that I have now is that I animate a child element that has two entry
animations, that the show method wants to play. 我现在遇到的问题是,我给一个具有两个
entry
动画的子元素设置了动画,而show方法要播放该动画。 A cascaded-animation
and a hero-animation
. cascaded-animation
和hero-animation
。
animationConfig: {
type: Object,
value: function () {
return {
'entry': [{
name: 'cascaded-animation',
animation: 'scale-up-animation',
}, {
name: 'hero-animation',
id: 'hero',
toPage: this
}],
'exit': [{
name: 'hero-animation',
id: 'hero',
fromPage: this
}, {
name: 'fade-out-animation',
node: this
}]
}
}
}
This results in the cascaded-animation
not playing, because the hero-animation
breaks, because the fromPage
that the hero-animation
requires is not defined. 这会导致
cascaded-animation
无法播放,因为hero-animation
会中断,因为fromPage
hero-animation
所需的fromPage
。
This is the warning I get: 这是我得到的警告:
hero-animation: fromPage is undefined!
英雄动画:fromPage未定义!
This is the error message I get: 这是我收到的错误消息:
polymer-mini.html:2061 Uncaught TypeError: CreateListFromArrayLike called on non-object
polymer-mini.html:2061未捕获的TypeError:在非对象上调用了CreateListFromArrayLike
The result is that on startup the cascaded-animation
does not run. 结果是在启动时,
cascaded-animation
无法运行。
Suggested Solutions: 建议的解决方案:
ONE: Find a way to modify the show
method in my index.html
to only play the first animation. 一个:找到一种方法来修改
index.html
的show
方法以仅播放第一个动画。 Maybe something like this: 也许是这样的:
show: function () {
this.style.visibility = 'visible';
this.playAnimation(['entry'][0]);
}
TWO: Change the neon-shared-element-animation-behavior.html
in line 40 from this: 第二:从第40行更改
neon-shared-element-animation-behavior.html
:
if (!fromPage || !toPage) {
Polymer.Base._warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
return null;
};
To this: 对此:
if (!fromPage || !toPage) {
console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
return null;
};
To what it has been before the minor patch to 1.2.2 of the neon-animation
element. 到
neon-animation
元素1.2.2的次要补丁之前的状态。 That way at least it only throws a warning, but plays the animation, instead of breaking the animation. 这样,至少它只会引发警告,而是播放动画,而不是破坏动画。
Click on any paper-card as often as you want, to trigger the hero and cascaded animation and observe that whenever you refresh the window the cascaded animation is not launched. 随意单击任意纸卡,以触发英雄和级联动画,并观察到,每当刷新窗口时,级联动画都不会启动。
How do I make the cascaded-animation
play in combination with the hero-animation
? 如何与
hero-animation
结合使用cascaded-animation
hero-animation
?
问题是一个错误,昨天通过霓虹动画1.2.3版本进行了修补。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.