来自 React Transition 组的 CSS 过渡不起作用，我不知道为什么

Question

我有一个应用程序，我试图让菜单从左侧滑出。我可以让它在点击菜单按钮时出现。然而，我正在使用来自React过渡组的cstransition来创建幻灯片效果，但它不起作用。当我点击菜单按钮时，菜单立即出现(无延迟)，但当我再次点击菜单按钮时，超时后菜单消失(500ms延迟)。菜单的打开和关闭都没有过渡。我不知道为什么只有在关闭菜单时才会出现延迟。我试着看看如果我去掉"unmountonexit"会发生什么。在cstransition下，但这只是使菜单不断出现，而不需要从按钮点击任何更改。

下面是我的代码:

import './App.css';
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
function App() {
const [open, setOpen] = useState(false);
function toggleOpen() {
setOpen(!open);
}
return (
<NavBar toggleOpen={toggleOpen} open={open}></NavBar>
)
}
function NavBar(props) {
function DropdownMenu() {
return (
<div className="DropdownMenu">
</div>  
)
}
return (
<div className="NavBar">
<div className="Menu-button" onClick={props.toggleOpen}>
<div></div>
<div></div>
<div></div>
</div>
<CSSTransition
in={props.open}
timeout={500}
className="Menu-open"
unmountOnExit>
<DropdownMenu/>
</CSSTransition>
</div>
)  
}            
export default App;

CSS代码如下:

.NavBar {
position: fixed;
display: flex;
justify-content: flex-end;
align-items: center;
top: 0;
width: 100%;
height: 60px;
background-color: gray;
border-bottom: solid black 1px;
}
.Menu-button {
background-color: transparent;
padding-top: 0.5rem;
cursor: pointer;
margin: 20px;
padding: 0;
}
.Menu-button div {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.DropdownMenu {
position: fixed;
top: 58px;
right: 5px;
width: 34%;
height: 500px;
border-radius: 5px;
background-color: lightgray;
}
.menu-open-enter {
position: absolute;
transform: translateX(-110%);
}
.menu-open-enter-active {
transform: translateX(0%);
transition: all 500ms ease;
}
.menu-open-exit {
position: absolute;
}
.menu-open-exit-active {
transform: translateX(-110%);
transition: all 500ms ease;
}

Answer 1

这里有几个问题:

根据react-transition-group文档，CSSTransition组件接受一个classNamesprop -不要与用于将css样式直接传递给HTML元素的classNameprop混淆。

作为一个单独的问题，您提供的类名Menu-open,react-transition-group将后缀使Menu-open-enter,Menu-open-exit等。CSS标识符是区分大小写的，所以它不会匹配你的.menu-open-enter,.menu-open-exit的样式声明....

将这一行更改为classNames="menu-open"会使动画开始工作，尽管在页面中心和右边缘之间滑动看起来有点奇怪。我怀疑你想用transform: translateX(110%)而不是-110%。

沙箱