具有表格单元格宽度的CSS过渡 [英] CSS Transition with a table cell width

问题描述

我试图制作水平手风琴，但是我不知道如何才能使单元格"顺利展开.这是小提琴: https://jsfiddle.net/vf1z1ebp/4/

I trying to make a horizontal accordion, but I can't figure out how do I get the "cells" to unwrap smoothly. Here is the fiddle: https://jsfiddle.net/vf1z1ebp/4/

悬停时，过渡显然可以使用背景和字体颜色，但是宽度会立即跳变.我认为可能是因为其他三个单元格都具有自动宽度，但这似乎不是问题，因为该单元格也不起作用:

Transition clearly works with the background and font color upon hover, but the width just jumps instantly. I thought it might be because the other three cells have auto width, but that doesn't seem to be the problem as this one doesn't work either: 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;
}

我做错了什么?感谢您的回答！马列·普罗斯(

What am I doing wrong? Thanks for answers! Malej Pštros.

推荐答案

为使转换正常工作，您必须为这样的元素赋予 width .转换只能在数值上进行动画处理

For transition to work you have to give a width to the element like this.Transitions can only animate across numerical values

#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过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！