CSS 过渡最大宽度和最大高度答案

【问题标题】：CSS Transitions max-width and max-heightCSS 过渡最大宽度和最大高度
【发布时间】：2020-05-31 01:50:44
【问题描述】：

所以我在div 容器中有一个object。该对象具有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

【问题讨论】：

标签： html css css-transitions

【解决方案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 上分别指定转换将不起作用，因为它仅尝试在这些属性上转换，因此max-es 是忽略。因此产生了跳跃效果。

解决方案：首先，不要将max-es 指定为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%;
}

希望对您有所帮助。

【讨论】：

如果我只想使用百分比怎么办？查一下，我已经编辑了帖子。
没关系。但是您还没有在父 div 上指定任何宽度/高度。你将必须这样做。
嗯...在这种情况下，当max-width 被破坏时，它会弹回来。是的。给我一些时间..
@user3661754：在那里。更新了答案。

【解决方案2】：

如果要平滑更改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;
}

【讨论】：

【解决方案3】：

简单地说，你可以这样做

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

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

【讨论】：