React CSS翻译转换不起作用

Question

我正在尝试制作一个侧菜单的动画，但由于某种原因，它根本不起作用！

我读到一些答案，使用地图来映射<li>项目可能是问题所在(我只尝试过使用静态文本的几个项目(，但这似乎不是问题所在。

此外，我还将生成的项置于一种状态，并用useEffect包装该集以防止重新触发映射，但仍然不起作用。只有转换不起作用，菜单出现在它必须出现的地方，当我点击菜单按钮时关闭自己，等等。

EDIT：我认为值得一提的是，当我在开发服务器上使用它时，当我更新css文件时(它不会刷新页面(，当我更改一些使侧边栏移动的样式时，它会随着动画移动，所以动画就在那里，当我单击打开/关闭按钮时它不起作用，但它会立即出现。

p.S.uuid()为每个元素生成唯一的密钥，所以这也不是问题。

export default function SideBar({ names, closeSidebarOnClick, show }) {
const [robots, setRobots] = useState();
useEffect(() => {
setRobots(GenerateNavItems());
}, names);
function GenerateNavItems() {
return names.map((robotName) => {
return (
<li key={uuid()} className={`nav-item`} onClick={() => {closeSidebarOnClick();}}>
{robotName}
</li>
);
});
}

return (
<nav className={`sidebar ${show ? "show-sidebar" : ""}`}>
<ul>{robots}</ul>
</nav>
);
}

.nav-item {
padding-left: 15px;
text-decoration: none;
font-weight: bold;
}
.nav-item:hover {
color: red;
cursor: pointer;
}
.toggle-sidebar-button {
user-select: none;
cursor: pointer;
padding-left: 1.5rem;
padding-top: 0.5rem;
border: none;
background: transparent;
z-index: 300;
/* z-index: 50; */
}
.toggle-sidebar-button:active {
border: none;
}
.toggle-sidebar-button-line {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
.sidebar {
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 200px;
z-index: 200;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.sidebar.show-sidebar {
transform: translateX(0);
}
.sidebar ul {
height: 100%;
list-style: none;
padding-left: 3rem;
padding-top: 3rem;
display: flex;
flex-direction: column;
}

<div id="root">
<div class="content row">
<div class="toggle-sidebar-button">
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
</div>
<nav class="sidebar ">
<ul>
<li class="nav-item">ROBOT 1</li>
<li class="nav-item">ROBOT 2</li>
</ul>
</nav>
<div class="rendered-robot col">
<div>CHOOSE ROBOT</div>
</div>
</div>
</div>

Answer 1

可能是因为您正在重新渲染导航组件，所以转换不可见。我建议你尝试这个实验-在closeSidebarOnClickdont中，不要让它重新渲染，只使用-document.getElementsByTagName('nav')[0].classList.add('show-sidebar');

有一种方法可以创建这里提到的React.createRef()或useRef，但这也不经常使用。

好吧，这可能是一个糟糕的做法，但当涉及到css动画时，我们有什么替代方案？我一直通过redux使用这些动画：(我认为dom不能经常被直接操作，但由于这是一个导航栏，整个应用程序中可能只有一个导航，所以这么多都没问题。如果你找到了一种典型的反应方式来让css动画工作，请告诉我。

Answer 2

我也遇到了同样的问题，而uuid((就是问题所在。简单地使用不同类型的密钥就解决了转换问题。