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

Using ZeeCoder's and Brock Hensley's answers, here is my take. The Foundation syntax must have changed since ZeeCoder added his because I'm not using the content-wrapper class and it didn't feel right to edit his because it might still work with an older version of Foundation. I'm using 5.5.2.

Similar to ZeeCoder, I'm using SCSS and gulp-autoprefixer. Add this to a scss file in your project:

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.tabs-content {
  > .content {
    animation: fade-in 220ms;
  }
}

A limitation to this approach is that it doesn't fade out the current active tab before fading in the new active tab. That adds too many complications than I want to deal with. You would have to overload the JavaScript that removes/adds the active class and make sure display: none is added after a delay that matches your animation time.