简体   繁体   中英

Ionic CSS animation not working on device

I've got a ToDo-List style Ionic app with an <ion-list> and <ion-item ng-repeat> .

The <ion-items> do have the folowing animation.css on .ng-hide :

  -webkit-animation: flipOutX 0.3s;
  animation: flipOutX 0.3s;

The animation works fine in the browser but doesn't work on devices (android/ios). When I debug the app with safari I can see that .ng-hide with the right css is properly added - so ngAnimate seems to work alright.

I've tried using standard CSS animation (no animate.css) with all the webkits or ngFX - nothing seems to work - the animation always works in the browser but is never fired on iOS or Android.

To make it even better: It used to work on devices before I updated my setup.

EDIT: Animations do work on devices if I add them to a normal class (not .ng-hide ) - however .ng-hide does get added to the item.

I'm at a loss! What could be the reason?

Thanks for your help!

Here is me setup:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.8.5 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v5.10.0
Xcode version: Xcode 7.3 Build version 7D175 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM