jquery addclass之后的css转换

在我用jquery添加活动类之后，我试图缓慢地扩展一个div，但是我无法让它正常工作。 div只获取宽度，但不会发生转换。 我也尝试过用jquery制作动画，但也没用

$（文档）.ready（函数（）{
$（'.Sliders'）。单击（函数（e）{
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
});
});
#滑座{
宽度：100%；
身高：100%；
字体大小：0px；
位置：相对位置；
显示：表格；
边界塌陷：塌陷；
}
.滑块{
最小宽度：50px；
身高：100%；
显示：表格单元格；
框大小：边框框；
垂直对齐：顶部；
字体大小：72px；
文本对齐：居中；
-webkit过渡：所有2秒轻松；
-moz转换：所有2秒轻松；
-o-过渡：所有2s容易；
过渡：一切都很轻松；
}
.主动{
宽度：100%；
}
您可以添加
宽度：0%到
。滑块
设置样式并将转换添加到
。活动
类


$（文档）.ready（函数（）{
$（'.Sliders'）。单击（函数（e）{
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
});
});
#滑座{
宽度：100%；
身高：100%；
字体大小：0px；
位置：相对位置；
显示：表格；
边界塌陷：塌陷；
}
.滑块{
宽度：0%；
最小宽度：50px；
身高：100%；
显示：表格单元格；
框大小：边框框；
垂直对齐：顶部；
字体大小：72px；
文本对齐：居中；
-webkit过渡：所有2秒轻松；
-moz转换：所有2秒轻松；
-o-过渡：所有2s容易；
过渡：一切都很轻松；
}
.主动{
宽度：100%；
-webkit过渡：所有2秒轻松；
-moz转换：所有2秒轻松；
-o-过渡：所有2s容易；
过渡：一切都很轻松；
背景：红色；
}

1.
2.
3.
4.
该问题是由于您使用了
显示：表格单元格
无法轻松修改单元格宽度，当然也不能修改动画。你使用这个规则有什么特别的原因吗？这是我能想到的最简单的方法，当我想要一个div 100%和其他50 px的时候。你知道更好的方法吗？这件事是可行的，只是不适用于动画。你想让一个div填充整个屏幕，而其他div在屏幕外以50像素的增量对齐吗？不，它目前的工作方式与预期的大小一致。未激活的div每个填充50px，激活的一个填充剩余的空间。我还尝试了.active{width:calc（100%-150px）；}.Sliders{display:inline block；}，它们都适合一行，但动画仍然没有出现