5

我试图弄清楚 Zurb Foundation 中是否有很好地淡入标签的设置。

如果没有，有没有人知道手动实现这一目标的最佳方法？

jQuery 的目标是什么？

谢谢。

4

8 回答 8

19

使用 Zurb v5 和这篇文章，我可以通过在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; }
于 2014-01-15T04:30:47.083 回答
2

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

显着差异：

  • 我使用了 sass、bourbon 和 gulp autoprefixer（这就是代码简洁而简短的原因），
  • 我正在淡入淡出 the.content-wrapper而不是 whole .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; }
于 2015-02-26T12:26:32.653 回答
2

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

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

于 2013-01-18T06:42:52.653 回答
2

如果有人在基础 6 中偶然发现了这个问题，这里是我的 jQuery 解决方案，因为我不喜欢修改任何框架的核心。

// 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();
});

注意：is-active类应该替换为您指定的类（如果有）。

于 2017-02-09T08:59:44.380 回答
0

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; }
于 2016-02-12T15:54:24.607 回答
0

使用 ZeeCoder 和 Brock Hensley 的答案，这是我的看法。自从 ZeeCoder 添加他的类后，Foundation 语法肯定发生了变化，因为我没有使用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在与动画时间匹配的延迟后添加。

于 2015-10-29T17:20:25.123 回答
0

我正在使用 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 和动画不会出现。如果您只是将 opacity 设置为 0 ，.css('opacity', 0)它也不会起作用，因为 opacity 属性将在那里保持活动状态。jQuery 仅在淡入淡出动画期间激活和停用 opacity 属性，如果您保持该属性处于活动状态，它将保持为opacity: 0.

于 2015-08-28T17:48:19.540 回答
0

对 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;
    }
}
于 2018-07-13T14:55:08.200 回答