Animations goes wrong on tablet

ionic-v1
1

Hello all. I am new to ionic, and I might be doing something wrong.

But I just can’t seem to get it right.

Anyways, here is the problem:

I am building small “menu” for restaurants. I am using starter app.

So, I have two tabs and animation between them are not correct. When button right is pressed, animation goes right(that’s good) but when I press left button (left tab) animation goes right again.

I am using default slide-left-right class on tabs.

But what is even more strange is that on tablet, everything goes wrong with animations. animation starts going right, than jumps and go left.

My English is bad, so I am sending this video , so you can get clearer picture.

If someone knows where is the problem, please help.

Thanks in advance.

Here is some of the code:

first tab:

<ion-tabs class="tabs-icon-top slide-left-right">

  <!-- Friends Tab -->
  <ion-tab title="Kategorije" icon="icon ion-heart" href="#/tab/dash">
    <ion-side-menus>
<!-- Main content -->
  <ion-side-menu-content>
  <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>
  
  <!-- Left Side Menu -->
  <ion-side-menu side="left" expose-aside-when="large">

      <ion-nav-buttons side="left">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
    <ion-content class="has-header">
    <ion-list>
      <ion-item menu-close ng-repeat="category in categories" type="item-text-wrap" href="#/tab/categories/{{category.SIFRA_KATEGORIJE}}/{{category.KATEGORIJA_GRUPE}}">
        {{category.KATEGORIJA_GRUPE}}
      </ion-item>
    </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>
  </ion-tab>
  <!-- Dashboard Tab -->
  <ion-tab title="Račun"  ng-controller="TabBagdeCtrl" icon="icon ion-social-usd" href="#/tab/billing" badge="badge.productCount" badge-style="badge-assertive" >
    <ion-nav-view name="tab-billing"></ion-nav-view>
  </ion-tab>

</ion-tabs>

second:

<ion-view title="Račun" ng-controller = 'BillingCtrl'>
  <ion-content has-header="true" padding="true">


 <ion-list class="list list-inset">


   <div class="item item-divider">
      <div class="row responsive-sm">
        <div class="col col-40">Naziv</div>
        <div class="col col-20">Količina</div>
        <div class="col col-20">Cena</div>  
        <div class="col col-20">Ukloni</div>  
      </div>
  </div>

      <ion-item class="item item-avatar-left" ng-repeat="product in products">
      <img ng-src="img/ionic.png">
      <div class="row responsive-sm">
        <div class="col col-40">{{product.name}}</div>
        <div class="col col-20">{{product.qty}}</div>
        <div class="col col-20">{{product.price}}</div> 
        <div class="col col-20">
          <button class="button button-icon icon ion-ios7-minus assertive" ng-click="removeProduct($index)"></button>
        </div>  
      </div>
      </ion-item>

  <div class="item item-divider">
    <div class="row responsive-sm">
        <div class="col col-40">Total</div>
        <div class="col col-20"></div>
        <div class="col col-20">{{total}}</div>
        <div class="col col-20"><ion-delete class="button button-calm" ng-if="productCount" ng-click="showConfirm()">Poruči</button></div>  
      </div>
  </div>
  </ion-list>
  </ion-content>
</ion-view>

And here is the link of the video of animation on tablet:

video

As you can see, sometimes it goes back as it should…

Although, this animation works on phone same as on desktop…

cheers

2

bump. Anyone? :smile:

3

can you provide a codepen with the issue?

4

Can you test this in the nightly builds?
The animations/transitions have been refactored and updated.

5

Hi, thanks for your replies.
I have tested it on nightly builds, and the problem persists. It only happens when I have something in “menuContent” view.
I will try to build it on codepen. But I don’t think I could recreate animation “glitch”, because it’s only visible on tablet.

6

Right, but I can test that codepen on a tablet :wink: