CSS Transitions When Tabpanel Switch

Classic Servoy
1

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!

2

Hi Bob,

you can have a transition for the entering tab

.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

3

Thanks Paolo! I’ll give it a try!!

4

Can you do this on a tabless panel - where you change programatically? This technique requires a click on a tab…

5

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.