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

Foundation 6 Solution Updated from Brocks code.

.tabs-panel {
    *zoom: 1;
    margin-bottom: 1.5rem;
    /* Customized */
    display:block important!;
    opacity: 0;
}
/* Customized */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.tabs-panel:before, .tabs-panel:after {
    content: " ";
    display: table; }
.tabs-panel:after {
    clear: both; }
.tabs-panel > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }
.tabs-panel.is-active {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    opacity: 1;
    display: block; }

Answer 2

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.

Answer 3

Using Zurb v5 and this post I was able to accomplish fading tabs by adding the Customized parts in foundation.css as follows:

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.5rem; 

  /* Customized */
  display:block:important!
  opacity: 0;
}
  /* Customized */
  @-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  @keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }
    .tabs-content > .content.active {

      /* Customized */
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
      opacity: 1;

      display: block; }

Answer 4

If anybody stumble upon this issue with foundation 6 here is my jQuery solution as I'm not a big fan of modifying the core of any framework.

// hack for fondation tabs animation 
$(document).on('change.zf.tabs', function(e) {
    var activeTab =  $($(e.target).find('.is-active a').attr('href'));
    activeTab.css('display', 'none').fadeIn();
});

Note: is-active class should be replaced by the one you specified if any.

Answer 5

Replace this line of code u.css("display","block").addClass("active") with u.fadeIn('slow').addClass("active") on line 49 of foundation.min.js

if you are using the uncompressed js
NB: i have not tested for uncompressed js
Replace this line of code $content.css('display', 'block').addClass('active'); with $content.fadeIn('slow').addClass('active'); on line 36 of jquery.foundation.tabs.js

Answer 6

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; }