1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    7
    Vote Rating
    0
    L_une is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Have you tried the showAnimation/hideAnimation configs?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    Dundas, Ontario, Canada
    Posts
    83
    Vote Rating
    -4
    rgporter can only hope to improve

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
    Answers
    3
    bweiler is on a distinguished road

      0  

    Default


    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:
    Code:
    ...
    
    
    '<span class="delete-button" style="float:right;" ></span>',
    
    
    ...

    Controller:
    Code:
                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.

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    Dundas, Ontario, Canada
    Posts
    83
    Vote Rating
    -4
    rgporter can only hope to improve

      0  

    Default


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