我在我的页面中使用DAISY UI抽屉组件，但当我试图通过JS函数移动页面方向时，抽屉会像下面的示例代码那样从左到右或从右到左显示动画，这是不受欢迎的移动，它应该在移动方向时以某种方式隐藏.
我试图用hidden级来隐藏它，但我找不到一种方法来再次显示它.
我试了z-index，但再一次触发不了它.
我试了<div class="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>