Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    wy@wax is on a distinguished road

      0  

    Default hideAnimation on toolbar

    hideAnimation on toolbar


    Hi,


    When I set the hideAnimation as "slideOut" or "slide", it fades out rather than slides out.
    My code is:

    Code:
    showAnimation: { 
    type: "slide", 
    direction: "right",
    duration: 250
    },
    hideAnimation: { 
    type: "slide", 
    direction: "left",
    duration: 250                
    }
    Note that showAnimation works fine here

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Vote Rating
    847
    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


    To hide, you should try slideOut instead of slide:

    Code:
    new Ext.Container({
        fullscreen : true,
        items      : [
            {
                xtype         : 'toolbar',
                docked        : 'top',
                showAnimation : {
                    type       : "slide",
                    direction  : "right",
                    duration   : 250
                },
                hideAnimation : {
                    type       : "slideOut",
                    direction  : "right",
                    duration   : 250
                },
                items         : [
                    {
                        text    : 'Hide',
                        handler : function(button) {
                            var toolbar = button.up('toolbar');
    
                            toolbar.hide();
                        }
                    }
                ]
            }
        ]
    });
    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 User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    wy@wax is on a distinguished road

      0  

    Default


    Thank you for your response michellesimoens. I've already tried slideOut but it is not working 100% to what I am hoping to achieve.

    What I'm trying to achieve is an animated slide out toolbar on the left hand side which slides in on top of a tabbed panel (which in turn contains carousels) when the user swipes on the left 300px of the page, and slides out when the user either clicks on the modal background or swipe on the toolbar. The sliding out animation appears correctly when the user clicks on the modal background, but it fades out the toolbar as I swipe it to the left.

    Here is my full code:

    Code:
    Ext.define("MyApp.view.Main", {
        extend: 'Ext.Container',
        requires: ['Ext.TitleBar'],
    
        config: {
            fullscreen: true,
            tabBarPosition: 'bottom',
            ui: 'dark',
            layout: 'card',
            items: [
            {
                    id: 'menubar',
                    xtype: 'toolbar',
                    docked: 'left',
                    hidden: true,
                    modal: true,
                    hideOnMaskTap: true,
                    width: 300,
                    height: 1600,
                    hideAnimation: { 
                        type: 'slideOut', 
                        direction: 'left',
                        duration: 250,               
                    }, 
                    showAnimation: { 
                        type: 'slideIn', 
                        direction: 'right',
                        duration: 250
                    },
                   
                    defaults:{
                        iconMask: true,
                    },    
                    items: [
                        {
                            text: 'Menu 1',
                            handler: function() {
                               // stuff here
                            }
                        },                
                        {
                            text: 'Menu 2',
                            handler: function() {
                                 // stuff here
                            }
                        }
                    ]
                },  
                    {
                    xtype: 'carousel',
                    title: 'Slides',
                    iconCls: 'info',
                    cls: 'card',
                    items:[
                           {
                           html: 'Card #1',
                           cls: 'card card1',
                           },{
                           html: 'Card #2',
                           cls: 'card card2'
                           },{
                           html: 'Card #3',
                           cls: 'card card3'                    
                           }
                           ]
                    },
              //
              // Other tabbed panels...
            ]
        }
    });
    And here is the handler code:

    Code:
            Ext.Viewport.element.on({
                swipe: function(e, target) {
                                    var dist = e.distance;
                                    var dir = e.direction;
                                    var x = e.pageX;
                                    var y = e.pageY;
    
                                    if(dist < 300 && x < 300){
                                        if(dir == 'right'){
                                            Ext.getCmp('menubar').show(true);
                                        }else if(dir == 'left'){
                                            Ext.getCmp('menubar').hide(true);
                                        }
                                    }
                }
            });
    Thank you for your help

  4. #4
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    75
    Vote Rating
    -1
    Pulp Fiction is an unknown quantity at this point

      0  

    Default


    Hi, I have a problem on hide/show animation.

    Code:
    ...........
    ...........
    items: [
                {
                    xtype: 'titlebar',
                    id: 'tool12',
                    docked: 'top',
                    title: 'Title',
                    hideOnMaskTap: true,
                    hideAnimation: { 
                        type: 'slideOut', 
                        direction: 'up',
                        duration: 250
                    }, 
                    showAnimation: { 
                        type: 'slideIn', 
                        direction: 'down',
                        duration: 250
                    },
                }
            ]
        },
        
        onListInitialize: function(component, eOpts) {
            var scroller = component.getScrollable().getScroller(),
                 bar = Ext.ComponentQuery.query('#tool12')[0];
            
            scroller.on('scroll', function() {
                if(scroller.dragDirection.y === 1) {
                    bar.hide();
                }
                
                if(scroller.dragDirection.y === -1) {
                    bar.show();
                }
            });
        }
    This is a function to hide/show the bar on scrolling event. But even if I put the animation to the toolbar, the effect is very bad, because under the bar you will see a white stripe for a moment. It's possible to insert a hide/show effect softer?! Like the effect of the bar of facebook application. Thank you!!!