5

ZurbFoundationでタブをうまくフェードインする設定があるかどうかを調べようとしています。

そうでない場合、誰かがこれを手動で達成するための最良の方法を知っていますか？

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

u.css("display","block").addClass("active")このコード行をu.fadeIn('slow').addClass("active")foundation.min.jsの49行目に置き換えます

非圧縮のjsを使用している場合
NB：非圧縮のjsをテストしていません
このコード行$content.css('display', 'block').addClass('active');を$content.fadeIn('slow').addClass('active');jquery.foundation.tabs.jsの36行目に置き換えます

于 2013-01-18T06:42:52.653 に答える
2

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; }
于 2015-02-26T12:26:32.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-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)

問題は、フェードアニメーションが最初に各タブを開いたときにのみ機能し、2回目にタブを開いたときにフェードアニメーションが取得されないことです。非アクティブ化するタブをフェードアウトする必要があることを解決するには、次にフェードインしたときに次のようなアニメーションを取得します。

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と直接表示されます。アニメーションは表示されません。不透明度を0に設定しただけでは.css('opacity', 0)、不透明度プロパティがアクティブなままになるため、どちらも機能しません。jQueryは、フェードアニメーション中にのみ不透明度プロパティをアクティブ化および非アクティブ化します。プロパティをアクティブにしたままにすると、プロパティは。のままになりますopacity: 0。

于 2015-08-28T17:48:19.540 に答える
0

ZeeCoderとBrockHensleyの答えを使用して、これが私の見解です。私はcontent-wrapperクラスを使用していないため、ZeeCoderが彼を追加してから、Foundationの構文が変更されている必要があります。また、古いバージョンの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

Foundation6ソリューションを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

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 に答える