使用 Polymer 1.1 我正在尝试使用slide-up-animation
。我遇到的问题是,当它向上滑动时,它是从页面中间开始而不是从底部向上滑动。
尽管文档中没有,但此代码示例 https://github.com/PolymerElements/neon-animation/blob/master/demo/dropdown/animated-dropdown.html显示我可以使用 transformOrigin
。但是,它对我不起作用。我不知道是否是因为我使用了 NEON 动画页面。关于如何让它从页面底部向上滑动有什么想法吗?
<neon-animated-pages selected="[[selected]]"
>
<portfolio-page></portfolio-page>
<script>
Polymer({
is: "portfolio-page",
behaviors: [Polymer.NeonAnimatableBehavior,
Polymer.NeonAnimationRunnerBehavior],
properties: {
animationConfig: {
type: Object,
value: function() {
return {
'entry': {
name: 'slide-up-animation',
node: this,
transformOrigin: 'bottom'
},
'exit': {
name: 'slide-up-animation',
node: this,
transformOrigin: 'bottom'
}
}
}
},
最佳答案
您不能使用上滑功能,您必须创建不同的动画:
<script>
Polymer({
is: 'slide-from-bottom-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(100%)'},
{'transform': 'none'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>
关于javascript - 聚合物上滑动画 : how to make it start from the bottom of the page?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33323831/