Adding webkit animations to listviews

[grandecomplex]

The video says it all: http://www.vimeo.com/17614876

• Works best on lists already in the DOM rather than lists in separate html files.
• The 3D swing works only on iOS devices and Safari.
• Tested on Android and iPhone. Need to load up my Blackberry Torch (doing that tomorrow).
• 3D Swing acts different on non-inset lists.
• As a quick fix for the blind down, I set a style for all .ui-listview > li to be 100% width. This probably needs to be removed.
• Uses new attribute animation-type for listviews. Options are animation-type="swing" and animation-type="blind-down".
• Creates "wow" and "pop" effect, clients are always asking for :)

[johnbender]

grandecomplex,

Sorry to get back to you so slowly, I'm going to move this into the feature request wiki page so we can circle back and address it after we hit the 1.0. The team is focusing on platform compatibility and stability until then.

Thanks for taking the time to submit and we'll make sure to look into!

[grandecomplex]

Dood don't worry about it.

Those animations are trivial and possibly superfluous. I have noticed your sliding animations are choppy. I've been able to make the animations much better outside of jQueryMobile. I'm doing a lot less JS than you guys, which is part of the improvement. But I'm also doing a couple of things in CSS that may help you in this critical UX. I'm using translate3d, and I'm making the incoming view move faster than the out bound view. This mimics the sliding view change animation on Android, but still looks nice on iPhone. Here's the CSS:

...
.out {
-webkit-animation-duration: 850ms;
visibility: visible;
}

.in {
-webkit-animation-duration: 300ms;
visibility: visible;
height: 100%;
}

.up {
-webkit-animation-name: up;
}

.down {
-webkit-animation-name: down;
}

.slide.in {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-animation-name: slideinfromright;
}

.slide.out {
-webkit-transform: translate3d(-100%, 0, 0);
-webkit-animation-name: slideouttoleft;
}

.slide.in.reverse {
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
-webkit-transform: translate3d(100%, 0, 0);
-webkit-animation-name: slideouttoright;
}
...

[johnbender]

I'll pass this along to the rest of the team. There are few folks who are targeting performance and animations like this directly so I'm sure it will be of help.

Also, just wanted to say that none of the work you've done is superfluous. Without contributions like yours the project wouldn't be what it is, so thanks again!