Slide from one tab to another

Dash Python
1

Hi,
I’m fiddling around with css for dbc.Tabs to let new active tabs slide in while sliding out the previous active one.
So far I got ‘some’ effect but not quite what I intended:

import dash_bootstrap_components as dbc

app = dash.Dash(__name__)
app.layout = 
  dbc.Tabs([
      dbc.Tab('Step 1',, label='Step 1', 
              className='tab', labelClassName='tab-label', activeLabelClassName='tab-label-active',
              activeTabClassName='tab-active'),
      dbc.Tab('Step 2, label='Step 2',
              className='tab', labelClassName='tab-label', activeLabelClassName='tab-label-active',
              activeTabClassName='tab-active'),
      dbc.Tab('Step 3, label='Step 3', 
              className='tab', labelClassName='tab-label', activeLabelClassName='tab-label-active',
              activeTabClassName='tab-active')
  ])

if __name__ == '__main__':
   app.run_server()

.tab-label-active {
    font-size: 1.2rem !important;
    color: white !important;
    background-color: #123456 !important;
    border-radius: 1rem !important;
}

.tab-label {
    color: #123456;
    font-size: 1.1rem;
    border-radius: 1rem !important;
}

.tab-active {
}

.tab {
    animation: slide 0.5s ease-out;
}

@keyframes slide {
    from {
        padding-left: 5rem;
        padding-right: 1rem;
    }
    to {
        padding-left: 0rem;
        padding-right: 0rem;
    }
}
1 Like