Fade-in animation flickers on rel devices

1

I am testing it on android 4.2.2
In my view I have set up a div like this:

<div ng-if="slowShow">
    <button>BLAH BLAH</button>
</div>

And here is a part of my controller:

$timeout(function(){
    $scope.slowShow = true;
}, 2000)

When I show my div I want it to animate with a fade in animation. But it just flickers twice. I tried fade-in-not-out. it works ok on browser and emulator. But flickers on real devices.

Any work around will be helpful. May be other animations like pop-in would also be a good replacement to flickery fade-in

2

Can you try this animation

I tried this and it worked smoothly on my iphone. If so, we can make some edit to the fade-in animation to make it smoother.

1 Like
3

Ok! I will try it and let you know.

Give me 15 mins

4

Yup! It works fine now. No glitches or flickers while entering-in.

Thanks!

Hey can you suggest me a good book or site to learn CSS3 animations.

5

Iā€™m more of visual person so when I was learning css animations, I used generators to learn.

This is a good one
http://cssanimate.com

1 Like
6

Can you upgrade this code for ionic3 ? Tks;)