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> 

Answer 2

一个简单的解决方法是使用min-width属性。

由于过渡需要固定值才能工作，因此请设置width: 0px; 和min-width: auto; 元素，并且因为min-width属性比width更重要，所以元素看起来相同，并且过渡顺利进行 。

table col {
    min-width: auto;
    width: 0px;
    -webkit-transition: width .8s ease-in-out;
    -moz-transition: width .8s ease-in-out;
    -ms-transition: width .8s ease-in-out;
    -o-transition: width .8s ease-in-out;
    transition: width .8s ease-in-out;
}

看到这个小提琴 ！