Hi,
I have a problem with a floating component that I want to animate.
The floating component is an item creates in my viewport. It contains an image tag in html and it is at a -62px top position because I don't want to see it at first.
There is the code of the component:
Code:
{
top: -62,
width: 167,
height: 62,
id: 'pointsTabItem',
cls: 'pointsTab',
html: '<img id="pointsTab" src="images/ongletPoints.png"/>',
},
When I click on a button in the current panel in the viewport, I want to show the floating panel with a slide down animation.
The code for the show animation work well :
Code:
var anim = {
duration: 500,
direction: 'down',
easing: 'ease-in',
autoClear: false,
from: {
top: '-62px',
},
to: {
top: '0px'
}
}
Ext.Anim.run(Ext.get("pointsTabItem"), 'slide', anim);
When I click on another button in the viewport, I want to hide the floating panel with a slide up effect.
I tried to change the value of the animation object, the panel is hiding but without any animation. I also try just to use a completely different object like the following one, and it also change nothing:
Code:
var anim2 = {
duration: 500,
direction: 'up',
easing: 'ease-in',
autoClear: false,
from: {
top: '0px',
},
to: {
top: '-62px'
},
before: function(el) {
console.log("before anim");
},
after:function(el) {
console.log("after anim");
}
Ext.Anim.run(Ext.get("pointsTabItem"), 'slide', anim);
So I finally tried the hide animation without doing the show animation before and it work great. So it look like the problem is when the component has been animate and I try to change the animation property and run the animation again it won’t work.
Does somebody has experience the same problem and find a solution?
Thank you