切换HTML排版方向时如何避免Daisy UI抽屉组件可见滑动？

在使用Daisy UI抽屉组件时，通过JavaScript切换HTML排版方向（ltr/rtl）时，抽屉会出现从左到右或从右到左的明显滑动，不符合预期——切换方向时应该自动隐藏抽屉。

已尝试的方案均存在问题：

• 使用hidden类隐藏抽屉后，无法再次正常显示
• 调整z-index属性无法恢复抽屉的正常功能
• 给drawer-side添加invisible peer-checked:visible，抽屉无法平滑收回，会立即隐藏

需求：切换HTML排版方向时避免抽屉的可见滑动，同时保留抽屉原本的平滑滑入滑出效果。

原代码示例：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.1/dist/full.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <label id="lng" class="btn btn-primary drawer-button m-1" onclick="switchDir()">Switch Html Dir</label>

  <div class="drawer">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <!-- Page content here -->
      <label for="my-drawer" class="btn btn-primary drawer-button m-1">Open drawer</label>
    </div>
    
    <div class="drawer-side">
      <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
      <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
        <!-- Sidebar content here -->
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
      </ul>
    </div>
  </div>

  <script>
    // Function to switch the HTML direction
    function switchDir() {
      let page = document.getElementsByTagName('html')[0];
      if (page.dir == 'rtl') {
        page.dir = 'ltr';
      } else {
        page.dir = 'rtl';
      }
    };
  </script>
</body>

核心思路是切换排版方向前先关闭抽屉，避免方向变化时抽屉的位置突变被用户看到，同时保留抽屉的原生动画效果。

修改后的完整代码：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.1/dist/full.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <label id="lng" class="btn btn-primary drawer-button m-1" onclick="switchDir()">Switch Html Dir</label>

  <div class="drawer">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <!-- Page content here -->
      <label for="my-drawer" class="btn btn-primary drawer-button m-1">Open drawer</label>
    </div>
    
    <div class="drawer-side">
      <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
      <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
        <!-- Sidebar content here -->
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
      </ul>
    </div>
  </div>

  <script>
    // Function to switch the HTML direction
    function switchDir() {
      const drawerToggle = document.getElementById('my-drawer');
      // 切换方向前先关闭抽屉
      if (drawerToggle.checked) {
        drawerToggle.checked = false;
      }
      // 切换排版方向
      let page = document.getElementsByTagName('html')[0];
      page.dir = page.dir === 'rtl' ? 'ltr' : 'rtl';
    };
  </script>
</body>

原理说明 #

• Daisy UI的抽屉通过复选框的checked状态控制显示/隐藏，取消勾选会触发抽屉原生的平滑收起动画
• 先关闭抽屉再切换方向，方向变化时抽屉已处于隐藏状态，不会出现位置突变的滑动现象
• 完全保留抽屉原本的平滑滑入滑出逻辑，无需修改自定义CSS类，避免兼容性问题

内容的提问来源于stack exchange，提问作者Dreamer64