容器挤压引发的思考

起因

最近在学next的时候发现siderbar收起的时候文字会发生挤压变形的现象，看起来非常不舒服，于是我就想找一个方法来避免这种现象的发生。

解决方法

我们可以通过transition + onTransitionEnd事件来实现一个过渡的效果，从而避免文字挤压变形的问题。下面是一个简单的示例代码：

'use client'
import { MenuIcon } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useState } from 'react'
export default function Sidebar() {
  const [isToogled, setIsToggled] = useState(false)
  const [isLabelVisible, setIsLabelVisible] = useState(true)

  const toogle = () => {
    setIsToggled((value) => {
      if (!value) setIsLabelVisible(false)
      return !value
    })
  }

  return (
    <aside
      onTransitionEnd={(event) => {
        if (event.propertyName === 'width' && !isToogled) setIsLabelVisible(true)
      }}
      className={cn(
        'hidden shrink-0 overflow-hidden border-r bg-card/80 px-4 py-6 lg:block',
        !isToogled ? 'w-63' : 'w-16',
        'transition-[width] duration-300 ease-in-out'
      )}
    >
      <div className="w-full flex items-center gap-4">
        <MenuIcon onClick={toogle} className='cursor-pointer'/>
        {isLabelVisible && <span className="text-lg whitespace-nowrap">side bar</span>}
      </div>
    </aside>
  )
}