html - 固定宽度的多个div的过渡

Question

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

一对:

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

当然，这对高度有效，但对宽度无效，因为它是固定的。

即使宽度固定，是否有可能实现效果？ 如果没有，请问我应该如何解决这个问题？

Answer 1

你可以 hacky 并使用 !important 编写你的 CSS 规则:

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

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

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