Animating a floating component don't work - slide down / slide up animation type

[L_une]

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:

 {
                 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 :

 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:

 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

[mitchellsimoens]

Have you tried the showAnimation/hideAnimation configs?

[rgporter]

I've had this problem too, tried the showAnimation and hideAnimation configs but while slide left/right work, up/down never work for a floating panel.

[bweiler]

I'm having the same problem with slide. I tried flip and fade and they worked fine. Here's the approach I am using:


XTemplate:

...


'<span class="delete-button" style="float:right;" ></span>',


...

Controller:

            button = Ext.create('Ext.Button', {
                ui: 'decline-small',
                text: 'Delete',
                hidden: true,
                showAnimation: {
                    type: 'slide',
                    direction: 'left',
                    duration: 1000,
                }
            });


            
            if (!target.down(".x-button")) {
                button.on('tap', function(button) {
                    // Remove the list item
                    button.destroy();
                    list.getStore().removeAt(index);
                    
                    // Remove the bill from the database
                    this.onDeleteBill(record);
                }, this);
                button.renderTo(target.down(".delete-button"));
                button.show();
            }

Any suggestions would be greatly appreciated.

[rgporter]

I still have this problem too, I've tried everything suggested here and lots of other stuff and only the exit animation works.