Hi all,
Just for the records, I’ve managed to achieve what I wanted using a single page
and a lower level animation api. If it can be useful to others…
animatePage: function (page, properties) {
var cardAnimation = new qx.ui.mobile.layout.CardAnimation();
var pageElement = page.getContentElement();
var animation = qx.bom.element.Animation.animate(pageElement,
cardAnimation.getAnimation(properties['animation'], "out",
properties['reverse']), 500);
animation.addListenerOnce("end", function (e) {
qx.bom.element.Animation.animate(pageElement,
cardAnimation.getAnimation(properties['animation'], "in",
properties['reverse']), 500);
}, this);
}
Regards,
Vincent
Le 14 avr. 2014 à 15:45, Vincent Vandenschrick <vvand...@gmail.com> a écrit :
> Hi Christopher,
> Thank you very much for the suggestion. I think it can definitely be a
> solution.
>
> However, I don’t get why page.exclude({animation:’slide’}) doesn’t animate
> anything. It just hides the page abruptly. Do I misunderstand something ?
> Then for the timer thing, it’s true I cannot have the same instance at 2
> different places. That’s why I thought about an « animateEnd » event or
> something like that.
>
> So the pseudo code would end up as being like :
>
> page.addListenerOnce(‘animateEnd’, function(e) {
> changePageModel(page, newModel);
> page.show({animation:’slide’});
> }, this)
> page.exclude({animation:’slide’});
>
> I don’t know if this can be achieved with current qooxdoo api. OTOH, I can
> definitely live with the timer or a second page instance ;-)
>
> Thanks !
> Vincent
>
> Le 14 avr. 2014 à 14:30, Christopher Zündorf <christopher.zuend...@1und1.de>
> a écrit :
>
>> Hi Vincent,
>>
>> the problem is caused by the usage of the page animation.
>>
>> I think you want to have the same page, duplicated just for the animation,
>> filled with the new data.
>>
>> As the page can not be filled with data two times, and be on two places at
>> the same time, you can not get rid of the timer with this solution.
>>
>>
>> I would create a second instance of the page and switch between the two
>> instances.
>>
>> Page A >> Page A1 with new data >> Page A with new data
>>
>> This would be the easiest solution.
>>
>> Greetz Christopher
>>
>>
>>
>>
>>
>> Am 13.04.2014 um 20:31 schrieb Vincent Vandenschrick <vvand...@gmail.com>:
>>
>>> Hi qooxdooers,
>>> I’m facing a problem where I want to simulate a page transition towards the
>>> same page while changing the model the page is bound to. having this « fake
>>> » transition bound to horizontal swipe event can give the user the
>>> impression he navigates between elements whereas, technically, we re-use
>>> the same UI components.
>>>
>>> I did several tries with more or less success :
>>>
>>> 1/ exclude and show :
>>>
>>> page.exclude({animation: "slide", reverse: e.getDirection() == "left"});
>>> page.show({animation: "slide", reverse: e.getDirection() != "left"});
>>>
>>> Nothing happens. This must be due to the UI updates being queued for UI
>>> efficiency ?
>>>
>>> 2/ introduce a timer to let the transition happen :
>>>
>>> page.exclude({animation: "slide", reverse: e.getDirection() == "left"});
>>> qx.event.Timer.once(function () {
>>> page.show({animation: "slide", reverse: e.getDirection() != "left"});
>>> }, this, 1000);
>>>
>>> In that case, the content disappears and appears again after 1 second, but
>>> no animation is performed
>>>
>>> 3/ introduce an intermediary blank page (my best solution as of now) :
>>>
>>> if (e.getAxis() == "x") {
>>> blankPage.show({animation: "slide", reverse: e.getDirection() != "left"});
>>> qx.event.Timer.once(function () {
>>> page.show({animation: "slide", reverse: e.getDirection() != "left"});
>>> }, this, 1000);
>>> }
>>>
>>> Now, the content disappears with animation and reappears 1 second later.
>>>
>>>
>>>
>>> In order to improve the swipe impression, I wanted to reduce the timer
>>> duration, but at some point, the page fails to re-appear.
>>>
>>> I’ve built small playground example to play with the code :
>>> http://tinyurl.com/okgmt49
>>>
>>>
>>> So my questions are :
>>> 1/ Is there a way to get rid of the timer ? Or is there some kind of
>>> animationEnd event I could bind to ?
>>> 2/ Is there a way to get rid of the intermediate blank page ? I couldn’t
>>> make page.exclude({animation}) to work.
>>>
>>> I feel like I miss some piece of information about qooxdoo ui management,
>>> repaint timing and so on. So any hint would be greatly appreciated.
>>>
>>> Thanks in advance !
>>>
>>> Vincent
>>>
>>>
>>> ------------------------------------------------------------------------------
>>> Put Bad Developers to Shame
>>> Dominate Development with Jenkins Continuous Integration
>>> Continuously Automate Build, Test & Deployment
>>> Start a new project now. Try Jenkins in the cloud.
>>> http://p.sf.net/sfu/13600_Cloudbees
>>> _______________________________________________
>>> qooxdoo-devel mailing list
>>> qooxdoo-devel@lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>> ------------------------------------------------------------------------------
>> Learn Graph Databases - Download FREE O'Reilly Book
>> "Graph Databases" is the definitive new guide to graph databases and their
>> applications. Written by three acclaimed leaders in the field,
>> this first edition is now available. Download your free book today!
>> http://p.sf.net/sfu/NeoTech
>> _______________________________________________
>> qooxdoo-devel mailing list
>> qooxdoo-devel@lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
------------------------------------------------------------------------------
Learn Graph Databases - Download FREE O'Reilly Book
"Graph Databases" is the definitive new guide to graph databases and their
applications. Written by three acclaimed leaders in the field,
this first edition is now available. Download your free book today!
http://p.sf.net/sfu/NeoTech
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
