Question

所以我在object容器中有一个div。该对象设置了max-width (600px)和max-height (400px)属性。当我悬停对象时，属性设置为none，因此可以正确呈现对象的width和height。但是，当鼠标移出object时，它会立即将width和height更改为max-width (600px)和max-height (400px)值，一秒后它会回退到它是原始的width和height值。

那么，当我将鼠标悬停在鼠标悬停时以及当鼠标移出时，如何进行转换以使object平滑地更改width和height。

HTML：

<html>
<!-- Blah blah some head tags here. -->
<body>
  <div id="c_a">
    <object data="https://www.google.ro/images/srpr/logo11w.png" type="image/png"></object>
  </div>
</body>
</html>

CSS：

html{
  font-size: larger;
  width: 100%;
  height: 100%;
}
#c_a object{
  transition: width 1s linear .5s, height 1s linear .5s;
  -webkit-transition: width 1s linear .5s, height 1s linear .5s;
  -o-transition: width 1s linear .5s, height 1s linear .5s;
  -moz-transition: width 1s linear .5s, height 1s linear .5s;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 400px;
  vertical-align: text-top;
}
#c_a object:hover{
  width: 200%;
  height: 200%;
  max-width: none;
  max-height: none;
}

Fiddle

Answer 1

问题是您没有在父元素上指定宽度。

object上的宽度为 100％。 100％是什么？它是父元素宽度的 100％百分比，在这种情况下是div。如果父元素没有指定宽度，那么你最终会遇到这样的问题。

解决方案 ：在包装器div上指定宽度。

演示：http://jsfiddle.net/abhitalks/Pv4y4/4/

CSS ：

div#c_a { width: 200px; } /* specify width on parent here */

#c_a object {
    -webkit-transition: width 1s linear .5s, height 1s linear .5s;
    width: 100%;
    height: 100%;
    ...
}
#c_a object:hover {
    width: 200%;
    height: 200%;
    max-width: none;
    max-height: none;
}

注意：理想情况下，您还需要在父级上指定height。

更新

只要父div上的指定宽度在max-width的规则范围内，它就可以正常工作。但是，一旦初始宽度违反或接近max-width规则，则转换将使其超出max-width，然后将快速恢复为原始。

问题：在width和height上单独指定转换将无效，因为它只尝试转换这些属性，因此{ {1}}被忽略。因此跳跃效应。

解决方案 ：首先，请勿将max- es指定为max-。由于您要将图像大小增加200％，因此请将这些指定为200％。其次，在没有特定属性的情况下指定转换。这使得所有相关属性都得到了转换，并将在一定程度上帮助缓解问题。

演示2：http://jsfiddle.net/abhitalks/Pv4y4/9/

CSS ：

none

希望有所帮助。

Answer 2

简单来说，您可以这样做

transition: max-width 1s linear .5s;

演示：http://jsfiddle.net/hvosanzL/

Answer 3

如果要平滑地更改max-width / max-height，则必须在最小化状态下指定max-*并将宽度/高度设置为auto：

#c_a object{ {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 40px;
    display: block;
    transition-duration: 200ms;
    transition-delay: 1ms;
    transition: position 1s, left 1s, top 1s, width 1s, height 1s, max-width 1s, max-height 1s;
    transition-timing-function: ease;
}

#c_a object:hover {
    position: absolute;
    display: block;
    top: 100px !important;
    left: 0px !important;
    width: auto;
    height: auto;
    max-width: 500px;
    max-height: 200px;
}

CSS Transitions max-width和max-height

3 个答案:

更新