霓虹灯动画-页面在动画时跳跃

neon-animated-pages jumping when animating

本文关键字:动画 跳跃 -页 霓虹灯      更新时间:2023-09-26

每当页面动画时,它都会在结束时跳转。内容的上下变化非常快。

样式:

: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就没有足够的高度

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