有没有办法保持 NEON 动画的最终状态?我尝试过使用 fill: 'forwards'
但似乎没有做任何事情。
<template>
<div id="rect" style="width:100px;height:100px;background-color:red"></div>
...
properties: {
animationConfig: {
value: function () {
return {
'hide': [{
name: 'fade-out-animation',
node: this.$.rect,
// this doesn't work!
fill: 'forwards'
}]
}
}
}
},
基本上,我希望在 hide
动画完成后隐藏 div
。你可以在demo中看到红色 div
淡出,但在动画结束后立即出现。
最佳答案
我找到了问题的根源。
打开neon-animation-runner-behavior.html
并找到playAnimation
函数。
在 this._player.onfinish
内,请注意 this._player.cancel()
被调用。这个取消
基本上
Set source to null and clears all effects associated with the previous source content.
更新
最后,我向 playAnimation
函数添加了另一个参数,因此每当我需要强制维持结束状态时,我都会向该函数添加一个 false
标志像这样-
this.playAnimation('unloadCells', null, false);
这是迄今为止我提出的最安全的选项,因为它不会中断不同元素中现有的 polymer 动画。我确信 Polymer 团队将来能够提出很多解决方案,但目前这已经可以了。 :)
playAnimation: function (type, cookie, cancellable) {
// default its value to true so existing stuff won't be affected
cancellable = typeof cancellable !== 'undefined' ? cancellable : true;
var allConfigs = this.getAnimationConfig(type);
if (!allConfigs) {
return;
}
var allAnimations = this._configureAnimationEffects(allConfigs);
var allEffects = allAnimations.map(function(animation) {
return animation.effect;
});
if (allEffects.length > 0) {
this._player = this._runAnimationEffects(allEffects);
this._player.onfinish = function() {
this._completeAnimations(allAnimations);
if (this._player) {
// when manually set to false, this._player.cancel() will be skipped
// so we get to maintain the end state for some scenarios
if (cancellable) {
this._player.cancel();
}
this._player = null;
}
this.fire('neon-animation-finish', cookie, {bubbles: false});
}.bind(this);
} else {
this.fire('neon-animation-finish', cookie, {bubbles: false});
}
},
关于polymer - 如何在Polymer中保持 NEON 动画的最终状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31692377/