Question

我正在试图弄清楚Zurb基金会是否有很好地淡出标签的设置。

如果没有，是否有人知道手动实现此目的的最佳方法？

jQuery中的目标是什么？

感谢。

Answer 1

使用Zurb v5和this post我可以通过在 foundation.css 中添加自定义部分来完成淡化标签，如下所示：

.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 2

将这行代码u.css("display","block").addClass("active")替换为foundation.min.js第49行的u.fadeIn('slow').addClass("active")

如果你使用未压缩的js
注意：我没有测试未压缩的js
在jquery.foundation.tabs.js第36行用$content.css('display', 'block').addClass('active');替换此行代码$content.fadeIn('slow').addClass('active');

Answer 3

我使用Brock Hensley的答案来创建我自己的版本。

显着差异：

我使用了sass，bourbon和gulp autoprefixer（这就是代码干净简洁的原因），
我逐渐淡出.content-wrapper而不是整个.content，这样即使在淡化事件中也可以使用垂直按钮。

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

我的css输出是：

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

Answer 4

如果有人在基础6遇到这个问题，这里是我的jQuery解决方案，因为我不是修改任何框架核心的忠实粉丝。

import UIKit

struct Student {
    let name: String
    var score: Int
}

var studentsList: [Student]

let totalScore = studentsList.reduce(0) {$0.score + $1.score}

注意：// 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(); });类应替换为您指定的类（如果有）。

Answer 5

我正在使用Foundation-5.5.2并根据tettey的回答我做了以下操作来实现淡入淡出标签：

在foundation.min.js中，我查找了标签组件，您将找到以下代码：

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

如果我编辑它就像tettey的答案那样就是这样：

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

问题在于淡入淡出动画仅在您第一次打开每个标签时起作用，第二次打开标签时它不会获得淡入淡出动画。要解决这个问题，你必须淡出你正在停用的标签，这样下次你淡入它就会得到动画，如下所示：

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

请注意.fadeOut('fast')将其淡出，以便下次单击打开该标签时能够再次淡入。发生这种情况是因为jQuery.fadeIn激活opacity属性并将其从0增加到1并且如果不淡化元素，则不透明度保持在上次遗留的位置，因此它不会从0增加为1，但它将直接显示为1，动画将不会出现。如果您只使用.css('opacity', 0)将不透明度设置为0，则它将无效，因为不透明度属性将在那里保持活动状态。 jQuery仅在淡入淡出动画期间激活和停用不透明度属性，如果保持属性处于活动状态，它将保持为opacity: 0。

Answer 6

使用ZeeCoder和Brock Hensley的答案，这是我的看法。自从ZeeCoder添加了他之后，基础语法必须已经改变，因为我没有使用content-wrapper类，并且编辑他的感觉不对，因为它可能仍然适用于旧版本的Foundation。我正在使用5.5.2。

与ZeeCoder类似，我使用的是SCSS和gulp-autoprefixer。将其添加到项目中的scss文件中：

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

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

此方法的一个限制是，在淡入新的活动选项卡之前，它不会淡出当前活动选项卡。这增加了太多的并发症，而不是我想要处理的。您必须重载删除/添加活动类的JavaScript，并确保在与动画时间匹配的延迟后添加display: none。

Answer 7

Foundation 6解决方案从Brocks代码更新。

.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 8

对Foundation 6进行了一些更新和简化，这将使您到达需要的位置。您需要根据情况为动画属性添加前缀。

.tabs-panel {
    opacity: 0;
}

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

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

在Zurb Foundation淡出标签？

8 个答案: