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:
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);
}
},
我试图消除paddi从:host
ng,但这并没有帮助。我已将position: static
放在.iron-selected
上,因为其他neon-animatable
的高度不够。