2016-09-29 29 views
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的高度不够。

回答