温泉 - 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动画

回答

相关问题