【鼠标悬浮，元素宽度增加，文字一个一个显示出来】

呐呐呐呐。

于 2024-04-11 15:30:58 发布

阅读量248

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_56542349/article/details/137640685

版权

1、实现效果

在这里插入图片描述

2、实现思路

宽度变化：给容器设置:hover时的宽度，通过transition: width 1s ease实现宽度的过渡效果
文字一个一个出现：添加一个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;
  }
}