Question

我有一个组件，该组件具有基于组件状态的动态类名。菜单组件的初始状态为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。

Answer 1

JavaScript可以，需要修复的是CSS。不必使用动画，而只需使用过渡，这样菜单就不会在渲染时从打开变为关闭。

尝试以下操作：

向菜单ID添加过渡：

#menu {
    transition: 0.3s ease-out;
}

然后通过在菜单打开和关闭类之间切换来更改此值：

 .menuEnter {
    transform: translateY(0);
}

 .menuExit {
    transform: translateY(-100vh);
}

这样，在渲染组件时，菜单不会从一种动画状态转到另一种动画状态，而是保持关闭状态。

PS：出于性能考虑，请考虑使用3d变换。

如何防止初始渲染时出现动画？

1 个答案: