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에서 ng하지만 도움이되지 않습니다. neon-animatable의 높이가 충분하지 않기 때문에 position: static을 .iron-selected에 입력했습니다.