Polymer 上滑动画：如何让它从页面底部开始？

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 上滑动画：如何让它从页面底部开始？

Polymer slide-up-animation: how to make it start from the bottom of the page?

javascript

animation

polymer-1.0