1

我正在尝试在选项卡式布局中使用过渡。

我正在研究 Laravel 框架。我的js代码不起作用...

期望的结果：选项卡内容出现并随着转换的实施而消失。

现在：选项卡正确切换，但立即 - 没有过渡。

$('#tabnavigation .item').click(function() {

$('.ui .tab .segment').transition('slide down');
});

我的观点是这样的：

    <a class="item red active" data-tab="first">One</a>
    <a class="item blue" data-tab="second">Two</a>
    <a class="item blue" data-tab="third">Three</a>
    <a class="item blue" data-tab="fourth">Four</a>
    <a class="item blue" data-tab="fifth">Five</a>



  </div>


  <div class="ui tab segment active" data-tab="first">

      @include('widgets._15_elections_introduction')



  </div>
  <div class="ui tab segment" data-tab="second">




       @include('widgets._15_elections_bycandidate')




  </div> {{-- second --}}
  <div class="ui tab segment" data-tab="third">


      @include('widgets._15_elections_byelectoralcommitee')



  </div>

  <div class="ui tab segment" data-tab="fourth">


      @include('widgets._15_elections_add_refine')



  </div>

  <div class="ui tab segment" data-tab="fifth">


      @include('widgets._15_elections_help')



  </div>

有人帮我吗？

4

2 回答 2

4

没有发生任何事情的原因是因为您的选择器是错误的 -.ui .tab .segment意味着您正在寻找一个元素，该元素在一个元素内具有类段，该元素在具有类ui的元素内具有类选项卡。相反，您需要寻找的是具有所有这些类的元素，这意味着您需要删除空格。如果您想了解有关选择器的更多信息，这可能是一个不错的起点。

简而言之，替换$('.ui .tab .segment').transition('slide down');为$('.ui.tab.segment').transition('slide down');将使其工作......好吧，有点。它仍然不会执行您想要的操作，因为在您的点击事件发生时，该选项卡已经显示并且转换方法将简单地隐藏它。

为了做你想做的事，你需要：

  1. 隐藏显示的选项卡，因为这在 jQuery 单击事件触发时已经发生。
  2. 显示上一个选项卡，以便使用动画隐藏它。
  3. 在当前和上一个选项卡上应用过渡 - 这将隐藏一个并显示另一个。
  4. 记住当前选项卡，以便您知道在下一个选项卡更改中使用它作为以前的选项卡。

这是执行此操作的代码：

 $(document).ready(function () {
     // remember the tab currently active
     var previous = $('.ui.tab.segment.active');

     $('#tabnavigation .item').tab({
         onVisible: function (e) {
             var current = $('.ui.tab.segment.active');
             // hide the current and show the previous, so that we can animate them
             previous.show();
             current.hide();

             // hide the previous tab - once this is done, we can show the new one
             previous.transition({
                 animation: 'horizontal flip',
                 onComplete: function () {
                     // finally, show the new tab again
                     current.transition('horizontal flip');
                 }
             });

             // remember the current tab for next change
             previous = current;
         }
     });
 });

注意：我使用 Semantic UI 的 onVisible 事件而不是 click 事件——这通常是一个好主意，它确保选项卡内容变得可见，以便我们可以隐藏它并为其设置动画。

于 2015-08-08T17:23:17.613 回答
1

使用这种格式<div class="ui transition transition-type in tab" data-tab="tab-name">

（IE，） <div class="ui transition scale in tab" data-tab="tab-1">

它工作正常。

于 2017-09-11T10:10:11.400 回答