淡入淡出效果在第一次触发时会闪烁，但随后会按预期工作

Question

我在更改标签时遇到了不想要的视觉效果。我想要的是 .policyCentre__content 部分慢慢淡出，并且也慢慢淡入相关部分。但是，当您最初更改选项卡时，如果这是第一次加载匹配的policyCentre__content，它将闪烁而不是消失。

查看重现步骤：

1. 运行以下演示（您将从激活“选项卡 1”开始。
2. 单击“选项卡 2”并观察内容显示（“选项卡 1”内容淡出，但“选项卡 2”的内容仅出现。
3. 点击回到“标签 1”，内容消失并按预期显示。
4. 点击返回到“选项卡 2”，它现在可以正常工作了。

不确定为什么第二步最初只是让内容出现？

$(function() {

  function showContent(val){
    $(".policyCentre__content.active").fadeOut(500, function() {
      $(this).removeClass("active");
      $(window).scrollTop(0);
      $(".policyCentre__content[data-item='" + val + "']").addClass('active').fadeIn(500, function() {
        locked = false;
      })
    });
  }

  // prevent the UI from getting over-clicked
  let locked = false;

  $(".policyCentre__label:first, .policyCentre__content:first").addClass("active");

  $('.policyCentre__label').click(function() {
    if (locked) return;
    locked = true;
    var id = $(this).attr('data-item');
    $(".policyCentre__label").removeClass("active");
    $(this).addClass("active");
    showContent(id);
  });
  
  });

.policyCentre {
  border: 1px solid black;
  padding: 60px 0;
}
.policyCentre__label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
  width: fit-content;
  display: flex;
  align-items: center;
}
.policyCentre__label:hover, .policyCentre__label.active {
  color: orange;
}
.policyCentre__content {
  display: none;
  padding-left: 50px;
}
.policyCentre__content.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="policyCentre">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-2">
        <div class="policyCentre__tabs">
          <span class="policyCentre__label" data-item="tab-1">Tab 1</span>
          <span class="policyCentre__label" data-item="tab-2">Tab 2</span>
          <span class="policyCentre__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-10">
        <div class="policyCentre__content" data-item="tab-1">Copy for tab 1</div>
        <div class="policyCentre__content" data-item="tab-2">Copy for tab 2</div>
        <div class="policyCentre__content" data-item="tab-3">Copy for tab 3</div>
      </div>

    </div>
  </div>
</section>

Answer 1

我相信这是因为你的 CSS 中有这条规则：

.policyCentre__content.active {
  display:block;
}

...当您应用“活动”类时，它会强制 div 立即显示（而不是动画）。我删除了该规则，而是使用您的隐藏/显示功能来显示第一个选项卡（而不是依赖于该 display:block css 规则）。因为（对于第一次过渡）我们没有隐藏任何内容，所以我将您的隐藏/显示功能分为 2 个（transitionContent() 和 showContent()），因此我们最初可以调用 showContent()。

$(function() {
  function transitionContent(val) {
    $(".policyCentre__content.active").fadeOut(500, function() {
      $(this).removeClass("active");
      $(window).scrollTop(0);
      showContent(val)
    });
  }

  function showContent(val) {
    $(".policyCentre__content[data-item='" + val + "']").addClass('active').fadeIn(500, function() {
      locked = false;
    })
  }

  showContent('tab-1')
  // prevent the UI from getting over-clicked
  let locked = false;

  $(".policyCentre__label:first, .policyCentre__content:first").addClass("active");

  $('.policyCentre__label').click(function() {
    if (locked) return;
    locked = true;
    var id = $(this).attr('data-item');
    $(".policyCentre__label").removeClass("active");
    $(this).addClass("active");
    transitionContent(id);
  });

});

.policyCentre {
  border: 1px solid black;
  padding: 60px 0;
}

.policyCentre__label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
  width: fit-content;
  display: flex;
  align-items: center;
}

.policyCentre__label:hover,
.policyCentre__label.active {
  color: orange;
}

.policyCentre__content {
  display: none;
  padding-left: 50px;
}

.policyCentre__content.active {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="policyCentre">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-2">
        <div class="policyCentre__tabs">
          <span class="policyCentre__label" data-item="tab-1">Tab 1</span>
          <span class="policyCentre__label" data-item="tab-2">Tab 2</span>
          <span class="policyCentre__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-10">
        <div class="policyCentre__content" data-item="tab-1">Copy for tab 1</div>
        <div class="policyCentre__content" data-item="tab-2">Copy for tab 2</div>
        <div class="policyCentre__content" data-item="tab-3">Copy for tab 3</div>
      </div>

    </div>
  </div>
</section>