javascript - CSS Transition 在表 colgroup 中不起作用

Question

当 colgroup 宽度改变时，过渡不起作用。

$('#but').click(function() {
  if ($('table col').hasClass("expanded"))
    $('table col').removeClass('expanded');
  else
    $('table col').addClass('expanded');
});

table,
th,
td {
  border: 1px solid black;
}
table col {
  -webkit-transition: width .8s ease;
  -moz-transition: width .8s ease;
  -ms-transition: width .8s ease;
  -o-transition: width .8s ease;
  transition: width .8s ease;
}
.expanded {
  width: 200px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button id="but">Button</button>

<table>
  <colgroup>
    <col></col>
    <col></col>
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>

</table>

我正在使用这段代码。在此代码中，CSS Transition 属性将不起作用。 transition: width .8s ease;

Answer 1

CSS 过渡需要能够计算起点和终点之间的差异才能过渡它。如果未指定宽度，则宽度将默认为 auto，从 auto 开始，您不能将动画设置为固定值，例如 200px，因为 auto 可以是任何东西。

将基本的 width 属性应用于默认值为 100px 的 table col 选择器解决了这个问题，因为现在浏览器明白了它是什么你想做什么。

$('#but').click(function() {
  if ($('table col').hasClass("expanded"))
    $('table col').removeClass('expanded');
  else
    $('table col').addClass('expanded');
});

table,
th,
td {
  border: 1px solid black;
}
table col {
  width: 100px;
  -webkit-transition: width .8s ease;
  -moz-transition: width .8s ease;
  -ms-transition: width .8s ease;
  -o-transition: width .8s ease;
  transition: width .8s ease;
}
.expanded {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button id="but">Button</button>

<table>
  <colgroup>
    <col></col>
    <col></col>
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>

</table>