Fade in tabs in Zurb Foundation?

Question

I\'m trying to figure out if there\'s setting to fade in tabs nicely in Zurb Foundation.

If not, does anyone know the best way to achieve this manually?

Wha

Answer 1

Updated and simplified a bit for Foundation 6, this will get you where you need to be. You'll want to prefix your animation properties as needed for your situation.

.tabs-panel {
    opacity: 0;
}

.tabs-panel.is-active {
    animation: fade-in 0.5s;
    opacity: 1;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Answer 2

I am using Foundation-5.5.2 and based on tettey's answer I did the following to achieve fade in tabs:

In foundation.min.js I looked up the tab component, You will find the following piece of code:

u.siblings().removeClass(p.active_class).attr({"aria-hidden":"true",tabindex:-1}),u.addClass(p.active_class)

If I edit it to be like tettey's answer it would be like this:

u.siblings().removeClass(p.active_class).attr({"aria-hidden":"true",tabindex:-1}),u.fadeIn('slow').addClass(p.active_class)

The problem there is that the fade animation will only work at the first time you open each tab, the second time you open a tab it won't get the fade animation. To solve that you got to fade out the tab you are deactivating so the next time you fade it in it will get the animation, like this:

u.siblings().removeClass(p.active_class).fadeOut('fast').attr({"aria-hidden":"true",tabindex:-1}),u.fadeIn('slow').addClass(p.active_class)

Notice the .fadeOut('fast') to fade it out in order for it to be able to fade in again next time you click open that tab. This happens because jQuery.fadeIn activates the opacity property and increases it from 0 to 1 and if you don't fade the element out the opacity remains where it was left last time so It won't increase from 0 to 1 but it will directly appear as 1 and the animation won't appear. If you just set the opacity to 0 with .css('opacity', 0) it won't work either because the opacity property will remain active there. jQuery activates and deactivates the opacity property during the fade animation only, if you keep the property active it will remain as opacity: 0.