CSS Transitions When Tabpanel Switch

Forum to discuss the new web client version of Servoy.

CSS Transitions When Tabpanel Switch

Postby bcusick » Sun Sep 09, 2018 2:19 pm

I've been playing around a bit with the awesome ability to have more than one class on an item - and to switch them out at runtime! WOW!

I want to have a transition when changing tabs in a tabpanel - but I'm unsure on which item to put the transition CSS.

It seems like it *should* be on the tabpanel - but that doesn't work. Same with the forms inside the tabpanel object itself... has anyone done this?

Is it even possible?

Thanks!
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: CSS Transitions When Tabpanel Switch

Postby paronne » Tue Sep 11, 2018 10:51 am

Hi Bob,

you can have a transition for the entering tab

Code: Select all
.svy-tabpanel > .tab-content > .tab-pane > div {
   -webkit-transition: 0.3s ease-out left, right;
    -moz-transition: 0.3s ease-out left, right;
    -ms-transition: 0.3s ease-out left, right;
    -o-transition: 0.3s ease-out left, right;
    transition: 0.3s ease-out left, right;
}

.svy-tabpanel > .tab-content > .tab-pane > div.ng-enter {
   left: 100% !important;
}


however i don't think you can do any transition effect for the leaving tab, since the form is hidden and therefore not visible anymore.

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: CSS Transitions When Tabpanel Switch

Postby bcusick » Fri Sep 14, 2018 5:24 pm

Thanks Paolo! I'll give it a try!!
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: CSS Transitions When Tabpanel Switch

Postby bcusick » Sat Sep 15, 2018 1:44 am

Can you do this on a tabless panel - where you change programatically? This technique requires a click on a tab...
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: CSS Transitions When Tabpanel Switch

Postby paronne » Mon Sep 17, 2018 9:05 am

Hi Bob,

you could us a tabpanel where you hide the tabs via CSS and change the tabIndex programmatically. Still you will need to change the tabIndex to run this animation.
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 7 guests