css - 反应 CSS 翻译转换不起作用
问题描述
我正在尝试为侧面菜单设置动画,但由于某种原因它无法正常工作!
我阅读了一些答案,使用地图来映射<li>
项目可能是问题(我已经尝试过使用静态文本的几个项目),但这似乎不是问题。
此外,我还将生成的项目置于一个状态,并使用 useEffect 包装该集合以防止重新触发地图,但仍然无法正常工作。只有转换不起作用,菜单出现在它必须出现的位置,当我单击菜单按钮时自行关闭,等等。
编辑:我认为值得一提的是,在我的开发服务器上处理它时,当我更新我的 css 文件(它不刷新页面)时,当我更改一些使侧边栏移动的样式时,它会随着动画一起移动,所以动画就在那里,当我单击打开/关闭按钮时它只是不工作,但它只是立即出现。
PSuuid()
为每个元素生成唯一键,因此这也不是问题。
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>
解决方案
当您重新渲染导航组件时,可能会导致过渡不可见。我建议你试试这个实验 -closeSidebarOnClickdont
不要让它重新渲染,只需使用 -document.getElementsByTagName('nav')[0].classList.add('show-sidebar');
有一种方法可以创建一个React.createRef()
or ,就像这里useRef
提到的那样,但这又不是经常使用的。
好吧,这可能是一个不好的做法,但是当涉及到 css 动画时,我们有什么替代方案?我一直通过 redux 使用这些动画 :) 我认为 dom 不能经常直接操作,但由于这是一个导航栏,并且整个应用程序中可能只有一个导航,所以应该没问题。让我知道,以防你找到一种让 CSS 动画正常工作的典型反应方式。
推荐阅读
- python - 我是否需要每次在 peewee 中调用创建表?
- html - 有 div 倾斜来指向标志
- powerbi - PowerBI 数据集和报告替换
- unity3d - 我能否通过后期处理绽放使纹理的某些部分发光?
- c# - 从 Microsoft Access VBA 引用 .NET Core DLL
- android - API <= 24 的菜单项颜色未更新
- html - 将背景颜色应用于空 div
- java - 正确处理以字符串值形式出现的日期并进行比较
- c - 如何在 C 中的 Makefile 中使用参数
- google-sheets - 拆分转置不考虑第一个字符作为分隔符 - 任何替代方案?