固定宽度的多个 div 的过渡答案

【问题标题】：Transition of multiple divs with fixed width固定宽度的多个 div 的过渡
【发布时间】：2014-02-12 06:24:34
【问题描述】：

在我的页面上动态创建了数百个 div，因为它们在 N px 中具有所有不同的固定宽度。

F.e.一对：

<div class='show' style='width:121px'></div>
<div class='show' style='width:13px'></div>
<div class='show' style='width:58px'></div>

等等

在我的 css 中，我尝试进行转换：

<style type="text/css">
.show {
  float: left;
  background: rgba(120,120,120,0.5);
  transition: width 2s, height 2s;
  -webkit-transition: width 2s, height 2s;
}
.show:hover {
  width:300px;
  height:200px;
}
</style>

这适用于高度，但不适用于宽度，当然，因为它是固定的。

即使宽度固定，是否有可能获得效果？如果没有，你能告诉我我应该如何解决这个问题吗？

【问题讨论】：

内联样式总是最受青睐的。可以用 JS 来改，不过我建议先用线外样式（CSS 块或文件）。

标签： html css fixed-width

【解决方案1】：

你可以很老练，用!important写你的CSS规则：

.show {
  width:300px !important;
  height:200px;
}

但更好的方法是使用 jQuery 来定位它们，但是如果动态添加这些 div，则使用等待它们加载到 DOM 中的事件来实现。

$('.show').css('width', '300px');

【讨论】：