CSS过渡效果中的max-width和max-height

Question

CSS过渡效果中的max-width和max-height

6

所以我有一个在

容器内的。这个对象设置了max-width (600px)和max-height (400px)属性。当我将鼠标悬停在对象上时，属性被设置为none，以便可以正确地呈现对象的宽度和高度。然而，当鼠标移出时，它立即改变其宽度和高度为max-width (600px)和max-height (400px)值，并在一秒钟后回到其原始宽度和高度值。

那么我该如何过渡来使对象在悬停和鼠标移出时平滑地改变其宽度和高度？

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

- Emanuel Vintilă

3个回答

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

- Keith Hackworth

2

简单来说，你可以像这样做。

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

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

- VnDevil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhitalks · Accepted Answer

问题在于您没有在父元素上指定宽度。您在object上使用了百分比宽度，这是相对于父元素的宽度的100%。如果未指定父元素的宽度，则会出现此类问题。 解决方法：在包装器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上指定过渡不起作用，因为它只尝试在这些属性上过渡，因此max-被忽略。因此产生跳跃效果。

解决方案：首先，不要将max-指定为none。因为您正在将图像大小增加200％，所以也将这些设置为200％。其次，直接指定过渡而不是特定属性。这使得所有相关属性都得到过渡，并将在一定程度上有助于减轻问题。

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

CSS：

html, body { width: 100%; }
div#c_a { width: 60%; }
#c_a object {
    -webkit-transition: 1s;
    ...
}
#c_a object:hover {
    width: 200%;
    height: 200%;
    max-width: 200%;
    max-height: 200%;
}

希望这有所帮助。