Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I'm facing a problem with animation. I simplified my example to post it on the forum. I have 2 div components. The 1st is visible, while the 2nd is NOT visible. Pushing on buttons, the state of two div components is changed (the 1st is setted to visible = false, while the 2nd to visible = true). Pushing again on buttons, the state of two div components is changed again (the 1st is setted to visible = true, while the 2nd to visible = false), and so on... many times like you want...
When each of two div components is hided, I want to see an animation, for example anima.puff(). The problem is that this behavior is not performed correctly, probably because each of two components should be viewed in the same position in the page and so they are overlapped.
This the example code:
<window>
<div id="t1" action="onhide: anima.puff(#{self})">
<borderlayout height="300px">
<west>Label</west>
<center>
<box>
<tablelayout columns="3">
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/door.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/door.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/door.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/door.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/door.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/door.png"/>
</panelchildren>
</panel>
</tablechildren>
</tablelayout>
</box>
</center>
<east>
<button label="toggle" onClick="t1.visible = !t1.visible; t2.visible = !t2.visible"/>
</east>
</borderlayout>
</div>
<div id="t2" visible="false" action="onhide: anima.puff(#{self})">
<borderlayout height="300px">
<west>Pippo</west>
<center>
<box>
<tablelayout columns="3">
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/bed.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/bed.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/bed.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/bed.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/bed.png"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel>
<panelchildren>
<image src="/images/user/128/bed.png"/>
</panelchildren>
</panel>
</tablechildren>
</tablelayout>
</box>
</center>
<east>
<button label="toggle" onClick="t1.visible = !t1.visible; t2.visible = !t2.visible"/>
</east>
</borderlayout>
</div>
</window>
Asked: 2008-11-04 10:28:41 +0800
Seen: 143 times
Last updated: Nov 04 '08