我正在尝试使用React(以及Tailwind,但这不重要)创建一个在挂载时进行动画的效果。 我目前的实现方式如下:
const Component = () => {
const [mounted, setMounted] = useState(false)
useEffect(() => {
setTimeout(() => {
setMounted(true)
}, 250)
}, [])
return(
<nav
className={classNames(
'flex justify-between items-center transform-gpu transition-transform duration-500',
mounted ? 'translate-x-0' : '-translate-x-full')}> Some nav components </nav>
)
}
基本上,这段代码会超时状态的改变,这表明当组件被安装时,然后将CSS translate应用于元素。
我正在考虑优化当前解决方案,但想知道是否有其他方法来执行onMount动画。感谢任何建议。
如果需要,我可以创建一个SandBox示例。
mounted
状态和useEffect
的方法是正确的。我唯一会做不同的事情就是重新组织CSS。例如,不是为每个元素使用单独的类,而是使用一个名为“navbar”的类来保存所有“正常”的CSS,然后在挂载后添加一个名为“is-mounted”的类(该“is-mounted”类包含translateX)。但是,您可能需要分享您的CSS,以便我们更多地了解这个问题。像flex
等这些类从哪里来? - Giraphi