Question

我有一个div，我想要显示一个人的名字。

我只想在正常状态下显示该人的名字。当您悬停时，姓氏应出现在第一个名称的右侧，其宽度从0扩展到正常宽度。所有这些文字都与右边对齐。

如果我将过渡应用到姓氏范围，则它甚至不显示它我也尝试过max-width（就像这里的人一样：http://jsfiddle.net/qP5fW/87/）但它不起作用。所以我创建了一个包装器div，使用宽度而不是max-width，现在它可以工作，只是它根本没有显示转换。

我怀疑问题出在＆＃34; auto＆＃34;财产，但如果有人知道如何使过渡工作，我将非常感激。

这是我的小提琴：https://jsfiddle.net/drywrsy6/

HTML：

<div class="name">
  <span class="first">John</span>
  <div class="last-wrapper">
    <span class="last">Doe</span>
  </div>
</div>

CSS：

.name {
  border: 1px solid lightgrey;
  margin: 10px auto 0px auto;
  padding: 5px;
  width: 300px;
  font-size: 2em;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  font-style: italic;
}

.last-wrapper {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  width: 0;
  transition: all 1s;
}

.last {
  color: red;
}

.name:hover .last-wrapper {
  width: auto;
}

Answer 1

您可以使用max-width，因为它不适用于width: auto。

只需确保max-width值足够大以容纳最宽的文本，或者您需要在加载时计算此脚本的脚本。

由于max-width会比某些内容稍微宽一些，因此可以使用较短时间的转换持续时间，以使其在较宽的文本上看起来更好。

.name {
  border: 1px solid lightgrey;
  margin: 10px auto 0px auto;
  padding: 5px;
  width: 300px;
  font-size: 2em;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  font-style: italic;
}

.last-wrapper {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  max-width: 0;
  transition: all 0.3s;
}

.last {
  color: red;
}

.name:hover .last-wrapper {
  max-width: 100px;
  transition: all 0.7s;
}

<div class="name">
  <span class="first">John</span>
  <div class="last-wrapper">
    <span class="last">Doe</span>
  </div>
</div>

根据评论更新

请注意，并且正如SimoAmi所写，“...缩小时，反转动画，如果文本为100px且指定最大宽度为1000px，则花费大部分动画时间缩小空白900px差异“

解决这个问题的一种方法是详细说明transition's timing function，其中自定义cubic-bezier曲线可以是一个选项。

CSS无法正常工作的文本宽度转换

1 个答案: