Question

当colgroup宽度更改时，Transition不起作用。

$('#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属性应用于table col选择器并使用默认值100px解决了该问题，因为现在浏览器了解您要执行的操作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

一个简单的解决方法是使用bash install-deps属性。

由于转换需要固定值才能生效，因此请为您的元素提供min-width和width: 0px;，并且因为min-width: auto;属性比min-width更重要，所以您的元素看起来很像同样，你的过渡 smooothly 运行。

width

请参阅此fiddle！

CSS转换不在表colgroup中工作

2 个答案: