1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    bobHerman is on a distinguished road

      0  

    Default Unanswered: scrollTo method of Ext.scroll.Scroller not finishing animation

    Unanswered: scrollTo method of Ext.scroll.Scroller not finishing animation


    I've been pretty stumped here, and haven't found anything on the forums to help me out. I've got a scrollable DataView object full of images and when a user clicks on one of the images, I make a call to the scrollTo method of the dataview's getScrollable().getScroller() object (of class Ext.scroll.Scroller) to scroll that image to the center of the screen. This works fine, however I want additional functionality that I can't figure out how to implement properly. When an image is scrolled to the middle, I want to animate the expansion of its left and right css margins to push the other images away. Similarly, when the user clicks on another image, I want to animate the contraction of the current middle image's margins before scrolling to the new image, whose margins will then be expanded. I run into the following problem when trying to achieve this behavior:

    I make the following call to scrollTo in my DataView to animate the scrolling of itself.
    Code:
     var scroller = this.getScrollable().getScroller();
    scroller.scrollTo(offsetToScrollTo,0,true);
    Much of the time, the scroll will not complete animation. The scroll will only scroll to half of the way and then stop. However, when I wiggle the dataview a bit, it will suddenly jump to where I wanted it to scroll. Furthermore, if I listen to the event scrollend, it seems that when this event is fired, the offset of the scroller is exactly what I want it to be, but the scroller physically does not seem to go to the new offset until I wiggle it a bit with my mouse. I think the animation is being interrupted by my margin animations (achieved w/ CSS transitions btw) and I can't figure out how to solve this. I've tried waiting for the middle image's margins to finish contracting (by listening to webkitTransitionEnd) before attempting to scroll to a new image and the animation still gets interrupted. If I don't animate the call to scrollTo and call it like this instead (leaving out the 3rd parameter to scrollTo):
    Code:
    var scroller = this.getScrollable().getScroller();
    scroller.scrollTo(offsetToScrollTo,0);
    the scrolling then works fine, but because it isn't animated, it looks very jarring. Does anyone have any idea how I can keep animating my scrolls without having my images' margin expansions and contractions interrupt the scrolling animation?

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    bobHerman is on a distinguished road

      0  

    Default


    I tried using the setTimeout function to wait for 1 second after the middle image finishes contracting before attempting to scroll. The animation will not be interrupted in this case. This is not such a great solution though, and it would be nice to find a way to know exactly when it is okay to begin scrolling without fear of the scroll's animation being interrupted. If anyone has a better way to solve this problem, I'd really appreciate it!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar