Question

问题：

将光标悬停在X上并等待div完全折叠。
远离X
观察div如何跳到底部并直接向上。

问题：

如何在动画期间不使用字体换行来扩展div。（我现在使用延迟字体大小，这似乎有问题）。

约束：

由于此隔离片段的更广泛设计，这些约束有效。

无法禁用outer div上的换行（动画期间除外）。
无法为inner div添加固定宽度或高度。
不能使用JS

更多背景信息：

我使用white-space:nowrap作为悬停状态，因此在div崩溃时文本不会换行。然后，我使用延迟font-size转换来阻止文本在div再次展开时换行（因为它无法为white-space或display设置动画。似乎某种方式{0}的font-size在动画开始时会丢失几分之一秒或其他东西。不知道为什么它在开始时跳跃。

＆＃13;

.outer {
  width: 300px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}

.button {
  padding: 0px 10px;
  display:inline-block;
}

.outer:hover {
  width: 30px;
  white-space: nowrap;
}
.outer .inner {
  font-size: 15px;
  display:inline-block;
  transition: font-size 0s 2s;
}

.outer:hover .inner {
  font-size: 0px;
}

＆＃13;

<div class="outer">
<div class="button">
X
</div>
<div class="inner"> 
This is the variable content of the box
</div>
</div>

＆＃13;

Answer 1

你可以：

将line-height: 22px;添加到.outer .inner;和
将height: 22px;添加到.outer。

.outer {
  width: 300px;
  height: 22px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}

.button {
  padding: 0px 10px;
  display:inline-block;
}

.outer:hover {
  width: 30px;
  white-space: nowrap;
}
.outer .inner {
  font-size: 15px;
  line-height: 22px;
  display:inline-block;
  transition: font-size 0s 2s;
}

.outer:hover .inner {
  font-size: 0px;
}

<div class="outer">
<div class="button">
X
</div>
<div class="inner"> 
This is the variable content of the box
</div>
</div>

Answer 2

＆＃13;

.outer {
  width: 300px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}
.button {
  padding: 0px 10px;
  display: inline-block;
  float: left;
  line-height: 1;
}
.outer:hover {
  width: 30px;
  white-space: nowrap;
}
.outer .inner p {
  font-size: 15px;
  display: inline-block;
  float: left;
  transition: all ease-in-out 2s;
  line-height: 1;
  margin: 0;
}
.outer:hover .inner p {
  font-size: 0px;
  transition: all ease-in-out 1s;
}

＆＃13;

<div class="outer">
  <div class="button">
    X
  </div>
  <div class="inner">
    <p>This is the variable content of the box</p>
  </div>
</div>

＆＃13;

定位p，将过渡更改为all。

Answer 3

这是在将鼠标悬停在自身上时更改对象大小时遇到的问题之一。解决这个问题的技巧是使用父容器悬停，它将始终覆盖元素的宽度，导致轻微的重影效果，但与原始解决方案的视觉效果相比，这更加清晰。

您的约束列表并不易于使用，在这种情况下我能看到解决此问题的唯一方法是使button和不会干扰文档的元素在容器内流动，这样任何东西都不会包裹。以下是一些不同的尝试，其中一个有望满足您的要求：

使用white-space

拟合所有约束的解决方案

＆＃13;

.outer-wrapper {
  width: 350px;
}
.outer {
  width: 350px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}
.button {
  width: 0;
  height: 0;
}
.button:after {
  content: 'X';
  padding: 0px 10px;
  display: inline-block;
}
.outer-wrapper:hover .outer {
  width: 30px;
}
.outer .inner {
  font-size: 15px;
  display: inline-block;
  margin-left: 2em;
  transition: font-size 0s 2s;
  white-space: nowrap;
}
.outer-wrapper:hover .outer .inner {
  font-size: 0px;
}

＆＃13;

<div class="outer-wrapper">
  <div class="outer">
    <div class="button"></div>
    <div class="inner">
      This is the variable content of the box
    </div>
  </div>
</div>

＆＃13;

解决方案适合所有约束，更改标记以使用pre

这个解决方案引入了一个pre元素，它会阻止它自己包装，因为它从它的默认样式继承了white-space:pre声明。

＆＃13;

.outer-wrapper {
  width: 350px;
}
.outer {
  width: 350px;
  overflow: hidden;
  border: 1px solid red;
  transition: width 2s;
}
.button {
  width: 0;
  height: 0;
}
.button:after {
  content: 'X';
  padding: 0px 10px;
  display: inline-block;
}
.outer-wrapper:hover .outer {
  width: 30px;
}
.outer .inner {
  font-size: 15px;
  display: inline-block;
  margin-left: 2em;
  transition: font-size 0s 2s;
}
.outer-wrapper:hover .outer .inner {
  font-size: 0px;
}
pre {
  font-family: inherit;
  margin: 0;
}

＆＃13;

<div class="outer-wrapper">
  <div class="outer">
    <div class="button"></div>
    <div class="inner">
      <pre>This is the variable content of the box</pre>
    </div>
  </div>
</div>

＆＃13;

劈开你的出路

您需要阻止内部div的内容包装，如果您不希望通过white-space执行此操作，则唯一的选择是将其中的所有空格替换为非 - 确保元素不能再

包装的空间：

<div class="inner"> This is the variable content of the box </div>

跳跃的css字体大小过渡

3 个答案: