CODEWITHSUNDEEP
iosangularjscss-animationsionic-framework
Michal Ostruszka
Michal Ostruszka

Reputation: 2099

Weird flickering on simple animation on iOS with IonicFramework

I'm getting familiar with IonicFramework and building really simple app. For now it has one button revealing panel (fading in, was experimenting with sliding in from the bottom too). It works fine on Androids but on iOS animation has strange flickering at the beginning (on both emulator and device).

Basically my view looks as follows:

<ion-content class="has-header" ng-controller="MainCtrl">
    <div class="container">
      <button class="btn btn__big centered primary" ng-click="toggleDetails()">toggle info</button>
    </div>
    <div class="panel panel-animated primary ng-hide" ng-show="detailsVisible">
      Details here
    </div>
  </ion-content>

And css classes with animations I apply to ng-show

.panel {
  position: absolute;
  width: 100%;
  height: 40%;
  top: 60%;  
  padding: 1em;
}

.panel-animated {
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.panel-animated.ng-hide {
 -webkit-animation: fadeOut 0.5s;
 -moz-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
}

I'm not using any external libs to animate, just plain Ionic built-in animation classes. I created repository with complete, ready to run application so you may want to check it.

Also video showing flickering but as flash videos are crap there is only one recorded while there were many more of them actually video here

Upvotes: 1

Views: 2912

Answers (2)

renczus
renczus

Reputation: 170

Ionic keyframe animations fadeIn and fadeOut use opacity ng-hide makes an element invisible with display: none !important;. Adding/removing ng-hide class causes repaint to happen.

Ionic uses Angular ngAnimate. In your style.css you have:

.panel-animated {
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.panel-animated.ng-hide {
  -webkit-animation: fadeOut 0.5s;
  -moz-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
}

I tried running it on a pretty decent nvidia graphics and it caused a peak on the rendering graph in Chrome.

enter image description here

After changing the styles according to the docs on ngShow aniations

.panel-animated.ng-hide-remove {
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

.panel-animated.ng-hide-add {
  -webkit-animation: fadeOut 0.5s;
  -moz-animation: fadeOut 0.5s;
  animation: fadeOut 0.5s;
}

it causes no such peak:

enter image description here

It's because .ng-hide-add is applied after the element is rendered and only then animation is applied. Junk removed.

Upvotes: 7

Mikołaj Stolarski
Mikołaj Stolarski

Reputation: 183

Check the https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode. Probably iOS set wrong opacity value on the first frame.

Upvotes: 0

Related Questions