Question

如果我更改了显示属性，那么转换在谷歌浏览器（版本50）中无法正常工作（它会立即发生），但它可以在Firefox（版本44）和IE（版本11）中正常工作。

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.inner {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s linear 1s;
    display: inline-block;
}
.outer:hover .inner {
    width: 300px;
}
.outer:hover {
  display: inline-block; /* If I comment this, it will work */
}

您可以看到演示here。

Answer 1

向左添加：0到基本定义，你会没事的

Answer 2

使用display: block;代替display: inline-block;

＆＃13;

.inner {
  width: 100px;
  height: 100px;
  background: red;
  display: block;
}
.outer:hover .inner {
  width: 300px;
  -webkit-transition: width 2s linear;
  -moz-transition: width 2s linear;
  -o-transition: width 2s linear;
  transition: width 2s linear;
}
.outer:hover {
  display: block;
}

＆＃13;

<div class="outer">
  <div class="inner">
  </div>
</div>

＆＃13;

CSS转换不适用于谷歌浏览器

2 个答案: