转换持续时间没有正确应用 VanillaJS答案

【问题标题】：Transition duration is not applying correctly with VanillaJS转换持续时间没有正确应用 VanillaJS
【发布时间】：2021-05-29 08:29:09
【问题描述】：

我将 TailwindUI 中的幻灯片与 vanilla JS 一起使用，并且叠加层和不透明度正确应用，但动画会立即发生，而不是使用持续时间类。

https://tailwindui.com/components/application-ui/overlays/slide-overs

这是覆盖组件的 HTML sn-p。

  <div class="hidden fixed inset-0 overflow-hidden" id="panel-container">
    <div class="absolute inset-0 overflow-hidden">
      <!--
        Background overlay, show/hide based on slide-over state.
  
        Entering: "ease-in-out duration-500"
          From: "opacity-0"
          To: "opacity-100"
        Leaving: "ease-in-out duration-500"
          From: "opacity-100"
          To: "opacity-0"
      -->
      <div class="transition-opacity ease-in-out duration-1000 opacity-100 absolute inset-0 bg-gray-600 bg-opacity-70" id="panel-overlay" aria-hidden="true"></div>
      <section class="absolute inset-y-0 right-0 max-w-full flex" aria-labelledby="slide-over-heading">
      </section>
    </div>
  </div>

...这是删除面板容器 div 上的隐藏类的脚本。

    const panelContainer = document.querySelector('#panel-container');

    document.querySelector('#panel-settings--open').addEventListener('click', function(event) {
      event.preventDefault();
      
      panelContainer.classList.toggle('hidden');

    });

谁能指出我在这里做错了什么的正确方向？

【问题讨论】：

转换被应用到opacity，所以你需要修改那个属性来触发它。
嗨罗伯特，你找到解决方案了吗？我有同样的问题。不应用时长。
我也遇到了这个问题。隐藏元素时过渡效果很好，但显示它们时效果不佳。

标签： javascript html css tailwind-css

【解决方案1】：

我在过渡方面遇到了非常相似的问题，所以我想分享一下我是如何解决它的。请注意，这可能需要 Tailwind v3（CodePen 中的 v2 不适合我）。

首先，在 OP 的代码中，我只看到了主 Div 的隐藏/显示。我们还需要一些 JS 代码来为适当元素的过渡添加适当的 CSS 类。但是：在显示元素后立即应用 CSS 过渡（即删除“显示：无”）不起作用！请参阅 Mozilla here 的官方说明。我被困了很长时间试图弄清楚这个单一的问题。

我使用 Mozilla 的建议解决了我的问题，即在应用 CSS 属性前几毫秒应用 setTimeout()。在 OP 的情况下，这样的事情应该可以工作（未测试）：

const panelContainer = document.querySelector('#panel-container');
document.querySelector('#panel-settings--open').addEventListener('click', function(event) {
  event.preventDefault();

  panelContainer.classList.remove('hidden');
  setTimeout(function(){
    document.getElementById('panel-overlay').classList.add("ease-in-out", "duration-500", "opacity-100");
  }, 10);
});

以上内容用于显示幻灯片，并假设面板覆盖元素没有已经有与过渡相关的 CSS 类（或者至少，没有一个用于不透明度）。

隐藏幻灯片并让过渡正常工作有点棘手。您需要应用适当的类（例如 opacity-0）并让过渡完成在将隐藏类应用到主 Div。为此，我为“transitionend”事件添加了一个事件监听器，并在运行后隐藏。

【讨论】：