0
ページがアニメーションするたびに、最後にジャンプします。内容は本当に速く上ったり下ったりします。アニメーション時にネオンアニメーションページがジャンプする
スタイル：
: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：私はpaddiを削除しようとした
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からですが、それは役に立ちません。 neon-animatableは十分な高さを得られないので、position: staticを.iron-selectedに入れました。