Add: Using the "transition", to animate scrolling.

[rotorgames]

How to enable: has-transition = "true"

Test in /test/html/transition-scroll.html
collectionRepeat test: /test/html/list-fit.html

TODO:

• Test for Android 4.4.2 and 4.2.1 (good)
• Test for Android 4.0.1 (Not very good)
• Test for IOS
• Support collectionRepeat (See below)

Tips:

• Use for Android (> 4.2). Animation becomes smooth as native, without jerks. For unknown reasons, requestAnimationFrame does not work so well.
• Do not use on older Android (<4.2). Strange, but on older android requestAnimationFrame faster than transition.

Problem collectionRepeat (done):

The main problem is that the list is constantly jumping up and down.

As is now:

http://youtu.be/ZvIgatNr54Y

Position translate3d reaches-160px, and returns to-110px. transition so will not work!

As will be:

http://youtu.be/if4sMc_tj_4

Position translate3d does not jump, it increases linearly. Internal elements receive position translate3d + Indent container. transition will work well!

May have other solutions, but so far I have not found them.

[ajoslin]

Hi @rotorgames. Thanks for all the work!

Have you tested the performance of this on iOS compared to the current strategy?

[ajoslin]

With recent changes, I think collectionRepeat will work with this. @rotorgames let me know when you think these changes are at a state where I could look at them and consider testing/merging, I'm interested.

[rotorgames]

@ajoslin Thank you for your help.

collectionRepeat became very smooth, without jerks.
There is a problem with the rapid scrolling Components not have time to compile. Need more items in the cache.

Try: /test/html/list-fit.html

P.S. I have no IOS device that would check.

[ajoslin]

The problem with using onScroll for collectionRepeat is that the onScroll event is only called at a limited interval (scrollView's options.scrollEventInterval). This means that if we scroll at a high speed, collectionRepeat's render won't be called again until it's too late.

This is why collectionRepeat needs to hook into the scrollview's render callback itself, or find a new mechanism.

Anyway, this looks cool! I'll test it on iOS later today.

[rotorgames]

@ajoslin From the outset, could not understand why you replaced __callback not listening event scroll, it is now clear. Corrected.

The main problem is not the accuracy of determination of the coordinates.

Animation is considered through the transition, the event scroll for collectionRepeat considered through requestAnimationFrame.
For the transition, used cubic-bezier.
For the event scroll, a formula pos * (2 - pos).

Because of this, may be inaccurate, but I brought them to a minimum.

P.S. vendorPrefix always will be, but just in case corrected.

[PawelOwczarekFalcon]

when can I expect update to the main repository ??

[ajoslin]

I'll look at this in the coming week.

[rotorgames]

@PawelOwczarekFalcon @ajoslin I think ready.

On slower devices, there are still problems with the collection-repeat.

DOM, no time to compile. This can be overcome by increasing the cache elements.
Even better, make the attribute, such as cache-length for collection-repeat.
has-transition works better when compiling complex dom in collection-repeat as not hang during compilation.

[elennaro]

Why no progress here?

[axe312ger]

I am sure there is progress, just not on this pull request. I am observing these branches for a while:
https://github.com/driftyco/ionic/tree/wip-scrolling
https://github.com/driftyco/ionic/tree/wip-scrolling-old

[rotorgames]

@ajoslin Tested on IOS, and android (4.1.2 & 4.4.2), works well.

[Ionitron]

Greetings @rotorgames!

Thank you very much from all of us on the Ionic team for submitting this pull request. We appreciate your commitment to improving Ionic. Unfortunately, we are unable to merge this particular PR, as it may cause regressions or is already out of date with regard to recent fixes. We apologize, as we know how much time you may have put into the work.

We hope you will continue to contribute to Ionic in the future. Please note that we are more likely to merge a smaller PR that has a passing test and changes only one meaningful feature in the project.

For more information, please review our Pull Request Guidelines.

Best regards,

Ionitron