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;
}

我做错了什么？谢谢你的回答！ MalejPš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>

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

1 个答案: