1、实现效果

2、实现思路

1. 宽度变化： 给容器设置:hover时的宽度，通过transition: width 1s ease实现宽度的过渡效果
2. 文字一个一个出现：添加一个span标签，并设置文字不能换行，溢出隐藏。通过动画实现span宽度的增加

3、实现代码

 <div
   ref={targetRef}
   className={'switch-content'}
 >
   <span className={isHover ? 'reveal-animation' : ''}>
     切换到主页面
   </span>
   <Switch />
 </div>

.switch-content {
  width: 40px;
  height: 40px;
  background: linear-gradient(113.5deg, #4190f6 9.69%, #0066f6 92.56%);
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: width 1s ease;

  &:hover {
    width: 120px;
  }

  span {
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    display: inline-block;
  }
}

.reveal-animation {
  animation: revealText 1s forwards;
}

@keyframes revealText {
  0% {
    width: 0;
  }
  100% {
    width: 90px;
  }
}