具有表格单元格宽度的 CSS 过渡

Question

我试图制作一个水平手风琴，但我不知道如何让“细胞”顺利展开。这是小提琴：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.

Answer 1

要过渡到工作，您必须向这样的元素提供width。过渡只能跨数值进行动画处理

#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>