I have an animation, where the box slides up and down. It works on web, ios and android phonegap app and mobile safari (All I tested). It also works on iPhone5 iOS6, but I have problems because supporting classes, such as ng-hide-add, ng-hide-remove are not deleted after the animation completes. Does anyone eperienced similar issues?
EDIT: it basically appears that animation doesn't work on iOS6. Classes are added, but never removed.
UPDATE: the issue seems to happen when the animation time is less then 0.5s
I did some tests and it looks that something in my application caused animation classes on iOS6 to be sticky if the animation is under 0.5 seconds. I was able to solve the issue in a hacky way, by deleting the classes manually upon the animation complete event.
if(ios6) {
$('.element').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
$('.element').removeClass("ng-animate ng-hide-add ng-animate-start ng-animate-active ng-hide-add-active ng-hide-remove ng-hide-remove-active");
});
}
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.