Question

使用Polymer 1.1我正在尝试使用slide-up-animation。我遇到的问题是，当它向上滑动时，它从页面中间而不是从底部开始向上滑动。

虽然它不在文档中，但此代码示例https://github.com/PolymerElements/neon-animation/blob/master/demo/dropdown/animated-dropdown.html显示我可以使用transformOrigin。但是，它不适合我。我不知道是不是因为我正在使用霓虹灯动画页面。有关如何从页面底部向上滑动的任何想法？

    <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'
              }
            }
          }
        },

Answer 1

您无法使用上滑，您必须创建不同的动画：

<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>

Answer 2

或者，如果您不想创建自己的动画，可以使用transform-animation。

return {
 'entry': {
    name: 'transform-animation',
    transformFrom: 'translateY(100%)',
    transformTo: 'none',
    node: this,
    timing: {duration: 2000},
},

Polymer slide-up-animation：如何让它从页面底部开始？

2 个答案: