javascript - 动画时 NEON 动画页面跳跃

Question

只要页面有动画，它就会跳到最后。内容升降得非常快。

样式:

:host {
            display: block;
            padding: 10px;
        }

        #animatedPages .iron-selected {
            position: static;
        }

        #animatedPages{
            overflow: hidden;
        }

HTML:

 <paper-card class="fullwidth" heading="{{heading}}">
        <div class="card-content">
            <neon-animated-pages id="animatedPages"
                                 selected="0"
                                 entry-animation="[[entryAnimation]]"
                                 exit-animation="[[exitAnimation]]">
                <neon-animatable>
                    <paper-input label="Wat is de actieve ingrediënt in paracetamol?"></paper-input>
                </neon-animatable>
                <neon-animatable>
                    <paper-input label="Hoeveel is de max inname van hoestdrank per dag?"></paper-input>
                </neon-animatable>
            </neon-animated-pages>
        </div>
        <div class="card-actions">
            <div class="layout-horizontal">
                <paper-fab icon="arrow-back" on-tap="previousQuestion"></paper-fab>
                <paper-fab icon="[[nextButtonIcon]]" class="margin-left-auto" on-tap="nextQuestion"
                           id="nextButton"></paper-fab>
            </div>
        </div>
    </paper-card>

相关js:

 nextQuestion: function () {
            if (!this.checkIfFinalQuestion()) {
                this.entryAnimation = "slide-from-right-animation";
                this.exitAnimation = "slide-left-animation";
                this.$.animatedPages.selectNext();
                if (this.checkIfFinalQuestion()) {
                    return this.transformNextButtonToSendButton(true);
                }
                return this.transformNextButtonToSendButton(false);
            }
        },

        previousQuestion: function () {
            if(this.checkIfFirstQuestion()){
                return;
            }
            this.entryAnimation = "slide-from-left-animation";
            this.exitAnimation = "slide-right-animation";
            this.$.animatedPages.selectPrevious();
            if(!this.checkIfFinalQuestion()){
                return this.transformNextButtonToSendButton(false);
            }
        },

我已经尝试从 :host 中删除填充，但这没有帮助。我已将 position: static 放在 .iron-selected 上，否则 neon-animatable 将无法获得足够的高度。

Answer 1

显然这是一个已知的 chrome 错误，它不会在 FireFox 中发生。错误报告:https://bugs.chromium.org/p/chromium/issues/detail?id=649195#