CSS过渡与表格单元格宽度

Question

我正在尝试制作一个水平手风琴，但我无法弄清楚如何让“单元格”平滑展开。这是jsfiddle链接：https://jsfiddle.net/vf1z1ebp/4/。

当鼠标悬停时，过渡效果可以清晰地在背景和字体颜色上工作，但宽度会立即跳变。我以为可能是其他三个单元格具有自动宽度的原因，但这似乎并不是问题，因为这一个也不能正常工作：https://jsfiddle.net/vf1z1ebp/5/。

这是HTML代码:

<table id="matrix"> 
    <tr>

        <td class = "item">
            One
        </td> 

        <td class = "item">
            Two
        </td> 

        <td class = "item">
            Three
        </td> 

        <td class = "item">
            Four
        </td>

    </tr>
</table>

还有CSS：

#matrix {
    width: 100%;
    height: 100px;   
}

.item {
    vertical-align: middle;
    text-align: center;  
    border: 2px solid black;
    font-size: 35px;

    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    -o-transition: all 3s;
    transition: all 3s;
}

.item:hover {
    width: 50%;
    background-color: black;
    color: white;
}

我做错什么了吗？谢谢回答！Malej Pštros。

- Malej Pštros

Answer 1

要使过渡效果生效，您需要为元素指定一个width，例如：width: 200px;。 过渡效果只能在数值之间进行动画处理。

#matrix {
  width: 100%;
  height: 100px;
}
.item {
  vertical-align: middle;
  text-align: center;
  border: 2px solid black;
  font-size: 35px;
  width: 10%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
}
.item:hover {
  width: 50%;
  background-color: black;
  color: white;
}

<table id="matrix">
  <tr>

    <td class="item">
      One
    </td>

    <td class="item">
      Two
    </td>

    <td class="item">
      Three
    </td>

    <td class="item">
      Four
    </td>

  </tr>
</table>

- Akshay

---

它有效：https://jsfiddle.net/vf1z1ebp/14/！因此，为了正确过渡，不仅需要指定目标值，还需要指定起始值，对吗？感谢您的回答！不可能消除抽搐吗？ - Malej Pštros

@MalejPštros 最好的选择是减少时间并使用一个计时函数，如果需要可以将其更改为线性。 - Akshay

你的td宽度是硬编码的，不是动态的。你的方法并没有什么特别之处，相当普通。 - Green

@Green 你所说的“硬核”是什么意思？我只是按照他的要求更新了代码，让它以动画方式呈现。 - Akshay

你能否在不硬编码宽度值的情况下过渡实际宽度？例如，当单元格的文本被更长的文本替换时，表格将尝试拉伸列以适应它。有没有一种方法可以使这个过程动画化？ - Pawel