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

I used Brock Hensley's answer to create my own version.

Notable differences:

• I used sass, bourbon and the gulp autoprefixer (This is the reason the code is clean and short),
• I'm fading in-and-out the .content-wrapper instead of the whole .content, so that possible vertical buttons will be available even during the fading event.

@include keyframes(fadeIn) {
  from { opacity: 0; }
    to { opacity: 1; }
}

.tabs-content {
    > {
        .content-wrapper {
            display: none;
            opacity: 0;
        }

        .content.active .content-wrapper {
            display: block;
            animation: fadeIn .4s;
            opacity: 1;
        }
    }
}

My css output is then:

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

.tabs-content > .content-wrapper {
  display: none;
  opacity: 0; }
.tabs-content > .content.active .content-wrapper {
  display: block;
  -webkit-animation: fadeIn .4s;
  animation: fadeIn .4s;
  opacity: 1; }