问引导5隐藏元素和jquery fadeToggle玩得不好

EN

我使用引导5，我想淡出一个特定的div元素。jQuery有一个名为fadeToggle()的出色函数，用于完成这一任务，所以我想我可以使用它。

预期的行为是：

• div元素最初是通过d-none类
• 隐藏的，单击按钮链接可以在div

上切换淡入/淡出。

然而，Bootstrap的d-none似乎不能很好地使用jQuery的fadeToggle()，最终发生的是div元素在第一次单击时不会在中消失。随后对按钮链接的单击将正确淡出，因为d-none类从未被添加回，因此jQuery接管了元素的隐藏/显示。不过，褪色效果很好。

下面是一个示例：

<div class="container">
  <div class="row">
    <div class="col">
     <a href="#">Click me</a>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="one d-none">
       1 of 3
      </div>
    </div>
    <div class="col">
      <div class="two">
       2 of 3
      </div>
    </div>
    <div class="col">
      <div class="three">
       3 of 3
      </div>
    </div>
  </div>  
</div>

jquery脚本：

$("a").click(function() {
    $(".one").fadeToggle(1200, function() {
            $(".one").toggleClass("d-none") 
    });
});

下面是一个活生生的例子，只需在第一次单击之后刷新页面，以了解我对弹出而不是错误地褪色的含义：

https://codepen.io/iosub/pen/oNdLzgV

d-none 如何让jQuery在Bootstrap的类中表现得更好，这样我就可以无缝地淡入/消失？

作为一个额外的问题，是否有共同使用jquery +引导的约定？我觉得使用像d-none这样的显示属性会干扰jquery在元素“隐藏”时所期望的内容，从而导致上述奇怪的行为。jquery应该只是负责控制这些显示属性，还是应该在jquery完成后再添加引导类？(即，在d-none消失后添加fadeToggle()，并在fadeToggle()消失时将其删除。目前，它只是移除整个d-none类并将控制权交给jquery )