如何以及何时在纸质对话框上设置 animationConfig

Question

我在另一个元素中有一个 paper-dialog，看起来像：

<paper-dialog id="modal" modal>
  <h2>Login</h2>
  <p>Lorem......</p>

  <div class="buttons">
    <paper-button dialog-confirm autofocus>Login</paper-button>
  </div>
</paper-dialog>

我可以声明性地添加 entry-animation 和 exit-animation 但我真的想同时做两种效果 like it shows in the docs

我尝试使用类似的东西：

this.$.modal.animationConfig = {....}; //like the docs

并且我将 node 设置为 this.$.modal，但我很确定它根本不会读取该变量，因为当我检查 this.$.modal.getAnimationConfig('exit')（或 entry) 我一无所获。

那么我可以在生命周期的哪个阶段做这样的事情。

我的最终目标是在 entry 和 exit 上将交织在一起的（其中一个稍微延迟）动画应用到我的 paper-dialog 和 exit 中（因为他喜欢这样）称为 :p ) "Bob Dod"'s polycast

如果您不知道答案，请向我指出不同的方向也有帮助 ;)

Answer 1

我将聚合物与 angular 2 一起使用，这是我尝试添加动画的方式：

if (dialog) {
        dialog.animationConfig = {
            'entry': {
                name: 'transform-animation',
                node: dialog,
                transformFrom: 'translateY(100%)',
                transformTo: 'translateY(0)'
            },
            'exit': {
                name: 'transform-animation',
                node: dialog,
                transformFrom: 'translateY(0)',
                transformTo: 'translateY(100%)'
            }
        };
        dialog.open();
    }

Answer 2

看来我的评论对您有帮助，在此作为回答：

"Are you sure about this? I tried setting the animationConfig as this.$.modal.animationConfig = { ... } in this fiddle and everything worked just fine..."

如何以及何时在纸质对话框上设置 animationConfig

how and when to set animationConfig on a paper-dialog

polymer

paper-elements

polymer-1.0