首页 / 技术问答 / Html问答列表 / 问答详情

Html 悬停时宽度从 0 过渡到自动

我正在try 制作悬停后显示图标的按钮.

现在，当您在悬停状态下停留约2秒时，按钮似乎停留在悬停状态

有谁能修好这个吗？并试着让它变得更顺畅？

GIF: bro

.button {
  width: fit-content;
  height: fit-content;
  padding: 10px 15px;
  background-color: #323232;
  color: white;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
  position: relative;
  border: 1px solid #bdc3c7;
}

.button-text-container {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  transition-duration: 1s;
  transition-property: max-width;
  transition-timing-function: ease-in-out;
  font-size: 1.5em;
  width: fit-content;
  max-width: 0;
}

.button-icon-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 1.6em;
}

.button:hover .button-text-container {
  max-width: 1275px;
}

.button-text-container>span {
  margin: 10px;
}
<div class="button">
  <div class="button-icon-container">icon</div>
  <div class="button-text-container"><span>test</span></div>
</div>

推荐答案

将动画设置为max-width/height: "big-magic-number"unit;的问题恰恰在于数字magic和big.在定义的过渡期内，恢复到0需要时间.

使用max-width/max-height转换 carousel 是有缺陷的，在设计上是错误的.

Animate width to "auto" solution:

更好的解决方案是使用CSSgrid，如this answer中所述，其中动画基本上从0fr过渡到1fr

.button {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #323232;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #bdc3c7;
}

.button-slide {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 0.4s ease-in-out;
}

.button:hover .button-slide {
  grid-template-columns: 1fr;
}

.button-slide-inner {
  overflow: hidden;
}
<div class="button">
  <span class="button-icon">❤️</span>
  <div class="button-slide">
    <div class="button-slide-inner"><span>Heart</span></div>
  </div>
</div>

简单地说，使用grid-template-columns设置"width"的动画，使用grid-template-rows设置"height"的动画.

Html相关问答推荐

我似乎不能正确地将我的导航栏居中'

试图让三个Divs与下面的另外三个对齐

VBA从公共Google Drive地址下载文档-.Click事件(？)

为什么前端框架可以创建自定义属性，而我却被期望在挖掘之前添加数据

Bootstrap nav没有崩溃

我怎样才能有一个div，在其中放置一个消息，打破和不go 的div？

更改Angular 为17的material Select 字段的高度？

如果最后一行的卡数少于其他行，则在使用flex grow使卡在调整大小时拉伸后，flex卡的宽度将被拉伸

带有排序元素的 CSS 网格

：after 伪元素没有出现，即使它有 content 属性

在 laravel 中使用 DomPDF 将数据导出为 pdf 时，第二列被拉伸

jQuery 索引返回不正确的结果

如何使用javascript在jsx中重复插入特殊字符？

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

当作为常规图片输入时，Cloudfront分布式图像可显示，但作为背景图像不显示

a with