溫泉 - pushPage動畫

我有一個多行工具欄。代碼是這樣的：溫泉 - pushPage動畫

<ons-page id="prodotti"> 

<ons-toolbar fixed-style id="firstNav" class="first-line"> 
    <div class="left"> 
     <img src="dist/img/logo.png"> 
    </div> 
    <div class="right"> 
     <ons-toolbar-button onclick="myNav.pushPage('profilo.html')"> 
      <ons-icon icon="ion-person" size="28px" fixed-width="false"></ons-icon> 
     </ons-toolbar-button> 
     <ons-toolbar-button onclick="myNav.pushPage('carrello.html')"> 
      <ons-icon icon="ion-android-cart" size="28px" fixed-width="false"><span class="notification">1</span></ons-icon> 
     </ons-toolbar-button> 
    </div> 

    <div class="second-line navigation-bar" id="secondNav"> 
     <div class="navigation-bar__left"> 
      <span class="toolbar-button navigation-bar__line-height" onclick="menu.toggle()"> 
       <i class="ion-navicon" 
      style="font-size:28px; vertical-align:-6px;"></i> 
      </span> 
     </div> 

    </div> 
</ons-toolbar>

我的所有頁面都有一個這樣的工具欄。現在我有一個問題。當我用動畫pushPage時：幻燈片#secondNav似乎沒有動畫。它將在動畫結束後更改。我如何實現幻燈片到這個元素？

謝謝！

來源

2015-04-21 fraymas

你的代碼有一些錯誤。 ons-toolbar只接受div標記，class = left，center或right。您的<div class="second-line navigation-bar" id="secondNav">將永遠不會顯示。要創建兩行工具欄，只需使用兩個不同的工具欄即可。在您的代碼中導航器丟失，我將其添加到first頁面。您還忘記了最後添加</ons-page>標籤。

Here你可以找到一個工作CodPen例子，這裏是你修改後的代碼：

<ons-template id="profilo.html"> 
 
    <ons-page> 
 
    <ons-back-button>Go Back</ons-back-button> 
 
    </ons-page> 
 
</ons-template> 
 

 
<ons-page id="first"> 
 
    <ons-navigator var="myNav"> 
 
    <ons-toolbar fixed-style id="firstNav" class="first-line"> 
 
    
 
     <div class="right"> 
 
     <ons-toolbar-button onclick="myNav.pushPage('profilo.html')"> 
 
      <ons-icon icon="ion-person" size="28px" fixed-width="false"></ons-icon> 
 
     </ons-toolbar-button> 
 
     <ons-toolbar-button onclick="myNav.pushPage('carrello.html')"> 
 
      <ons-icon icon="ion-android-cart" size="28px" fixed-width="false"><span class="notification">1</span></ons-icon> 
 
     </ons-toolbar-button> 
 
     </div> 
 
    </ons-toolbar> 
 
    
 
    <div class="second-line navigation-bar" id="secondNav"> 
 
     <div class="navigation-bar__left"> 
 
      <span class="toolbar-button navigation-bar__line-height" onclick="menu.toggle()"> 
 
       <i class="ion-navicon" 
 
      style="font-size:28px; vertical-align:-6px;"></i> 
 
      </span> 
 
     </div> 
 
    </div> 
 
    </ons-navigator> 
 
</ons-page>

來源

2015-04-22 02:33:11

謝謝@AndiPavllo。我的代碼有一些缺失的項目，因爲它只是一個小塊。即使你的代碼似乎做了這項工作，但它沒有。我試着解釋一下。第二個工具欄必須像第一個那樣固定。我已經在我的代碼之前嘗試了你的代碼，但是如果我添加css位置：fixed，它只能在codepen中正常工作，但不能在我的手機或FF中正常工作，這是一個大問題。這就是爲什麼我把第二個Nav放在第一個工具欄中，只需要一點點的幫助。我看到第二個工具欄，但其行爲不正確。你有沒有任何提示用你的代碼修復第二個工具欄？ – fraymas

這是你的codepen稍作修改http://codepen.io/anon/pen/NqWRBz – fraymas

@fraymas你能否提供你的測試平臺和版本號？ –

溫泉 - pushPage動畫

回答

相關問題