在Zurb Foundation淡出标签？-Java 学习之路

我正试图弄清楚是否有设置在Zurb Foundation中很好地淡出标签 .

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

在jQuery中定位什么？

谢谢 .

8 回答

19

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

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

回复于 2024-05-03T15:33:05+08:00

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

回复于 2024-05-03T15:33:05+08:00

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

回复于 2024-05-03T15:33:05+08:00

0
如果有人在基础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 类应替换为您指定的类（如果有） .
回复于 2024-05-03T15:33:05+08:00
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并且不会出现动画 . 如果你只是使用 .css('opacity', 0) 将不透明度设置为0，它将无法工作，因为不透明度属性将在那里保持活动状态 . jQuery仅在淡入淡出动画期间激活和停用opacity属性，如果保持属性处于活动状态，它将保持为 opacity: 0 .
回复于 2024-05-03T15:33:05+08:00
1
使用ZeeCoder _1406082的答案，这是我的看法 . 自ZeeCoder添加他之后，基础语法必须已更改，因为我没有使用 content-wrapper 类，并且使用5.5.2它没有't feel right to edit his because it might still work with an older version of Foundation. I' m .

与ZeeCoder类似，我正在使用SCSS和gulp-autoprefixer . 将其添加到项目中的scss文件中：
```
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.tabs-content {
  > .content {
    animation: fade-in 220ms;
  }
}
```
此方法的一个限制是，在淡入新活动选项卡之前，它不会淡出当前活动选项卡 . 这增加了太多的并发症，而不是我想要处理的 . 您必须重载删除/添加活动类的JavaScript，并确保在与动画时间匹配的延迟后添加 display: none .
回复于 2024-05-03T15:33:05+08:00

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

回复于 2024-05-03T15:33:05+08:00

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

回复于 2024-05-03T15:33:05+08:00

在Zurb Foundation淡出标签？

8 回答

相关问题