问题
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?
What to target in jQuery?
Thanks.
回答1:
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
回答2:
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; }
回答3:
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-wrapperinstead 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; }
回答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.
回答5:
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.
回答6:
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.
回答7:
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; }
回答8:
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;
}
}
来源：https://stackoverflow.com/questions/14337948/fade-in-tabs-in-zurb-foundation