Javascript CSS转换在表colgroup中不起作用

colgroup width更改时，转换不起作用

$（'#but'）。单击（函数（）{
if（$（'table col'）.hasClass（“扩展”））
$（'table col'）.removeClass（'expanded'）；
其他的
$（'table col'）.addClass（'expanded'）；
});
表格，
th，
运输署{
边框：1px纯黑；
}
表列{
-webkit过渡：宽度。8s轻松；
-moz过渡：宽度。8秒易用性；
-ms过渡：宽0.8s；
-o型过渡：宽。8s；
过渡：宽度。8s缓解；
}
.扩大{
宽度：200px
}

按钮
月
储蓄
一月
$100
CSS转换需要能够计算起点和终点之间的差值，才能进行转换。如果未指定宽度，则宽度将默认为
auto
，从
auto
无法设置为固定值，如
200px
，因为
auto
可以是任何值

将基本
width
属性应用于默认值为
100px的
table col
选择器可以解决此问题，因为现在浏览器了解您要执行的操作


$（'#but'）。单击（函数（）{
if（$（'table col'）.hasClass（“扩展”））
$（'table col'）.removeClass（'expanded'）；
其他的
$（'table col'）.addClass（'expanded'）；
});
表格，
th，
运输署{
边框：1px纯黑；
}
表列{
宽度：100px；
-webkit过渡：宽度。8s轻松；
-moz过渡：宽度。8秒易用性；
-ms过渡：宽0.8s；
-o型过渡：宽。8s；
过渡：宽度。8s缓解；
}
.扩大{
宽度：200px；
}

按钮
月
储蓄
一月
$100
CSS转换需要能够计算起点和终点之间的差值，才能进行转换。如果未指定宽度，则宽度将默认为
auto
，从
auto
无法设置为固定值，如
200px
，因为
auto
可以是任何值

将基本
width
属性应用于默认值为
100px的
table col
选择器可以解决此问题，因为现在浏览器了解您要执行的操作


$（'#but'）。单击（函数（）{
if（$（'table col'）.hasClass（“扩展”））
$（'table col'）.removeClass（'expanded'）；
其他的
$（'table col'）.addClass（'expanded'）；
});
表格，
th，
运输署{
边框：1px纯黑；
}
表列{
宽度：100px；
-webkit过渡：宽度。8s轻松；
-moz过渡：宽度。8秒易用性；
-ms过渡：宽0.8s；
-o型过渡：宽。8s；
过渡：宽度。8s缓解；
}
.扩大{
宽度：200px；
}

按钮
月
储蓄
一月
$100
一个简单的解决方法是使用
minwidth
属性

因为转换需要一个固定的值才能工作，所以给出
width:0px和<代码>最小宽度：自动到您的元素，并且由于
min width
属性比
width
更重要，因此您的元素看起来是相同的，并且您的转换运行平稳

看这个
 一个简单的解决方法是使用
minwidth
属性

因为转换需要一个固定的值才能工作，所以给出
width:0px和<代码>最小宽度：自动到您的元素，并且由于
min width
属性比
width
更重要，因此您的元素看起来是相同的，并且您的转换运行平稳

看这个
 当为
表格列
指定了宽度而没有类
扩展
时，它工作。当为
表格列
指定了宽度而没有类
扩展
时，它工作。您的意思是根本不设置宽度吗？或者不专门将宽度设置为
？实际上这里不需要标记。例如，您可以在标记上应用转换。查看更新的fiddle：实际上，我正在动态更改宽度，这就是我使用colgroup的原因..因此仅..需要在colgroup中不设置宽度的解决方案如果需要进一步帮助，您需要更详细的示例！这个解决方案值得称赞，massive+1用于详细说明
width
vs
minwidth
，这确实是一个巧妙的技巧，我想知道它是如何跨浏览器的：）你的意思是根本不设置宽度吗？或者不专门将宽度设置为
？实际上这里不需要标记。例如，您可以在标记上应用转换。查看更新的fiddle：实际上，我正在动态更改宽度，这就是我使用colgroup的原因..因此仅..需要在colgroup中不设置宽度的解决方案如果需要进一步帮助，您需要更详细的示例！这个解决方案值得称赞，massive+1用于详细说明
width
vs
minwidth
，这确实是一个巧妙的技巧，我想知道它有多跨浏览器：）
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;
}