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 bug，它在FireFox中不会发生。错误报告：https://bugs.chromium.org/p/chromium/issues/detail?id=649195#

动画时跳动的霓虹动画页面

1 个答案: