我有一个具有基于组件状态的动态类名的组件。菜单组件的初始状态是false这样，因此当我加载网站时会触发退出动画。我试图在初始渲染时不播放退出动画，而是试图仅在用户单击菜单时触发动画。
@keyframes menuEnter {
from {
transform: translateY(-100vh);
}
to {
transform: translateY(0);
}
}
@keyframes menuExit {
from {
transform: translateY(0);
}
to {
transform: translateY(-100vh);
}
}
const [showMenu, setShowMenu] = useState(false)
<div className={`menuContainer ${showMenu ? `menuEnter` : 'menuExit'}`} id='menu'>
我正在尝试退出退出动画，因为在初始渲染时播放退出动画没有意义。
状态发生改变的onClick，当状态true的onClick其设置为false当状态false的的onClick其设置为true。
javascript还可以，需要修复的是CSS。除了使用动画之外，还可以使用过渡，因此菜单不会在渲染时从打开变为关闭。
请尝试以下操作：
向您的菜单ID添加过渡：
#menu {
transition: 0.3s ease-out;
}
然后通过在菜单打开和关闭类之间切换来更改此值：
.menuEnter {
transform: translateY(0);
}
.menuExit {
transform: translateY(-100vh);
}
这样，当组件渲染时，菜单不会从一种动画状态转到另一种动画状态，而是保持关闭状态。
PS：出于性能考虑，请考虑使用3d变换。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句