Html CSS Transitions max-width 和 max-height
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23807042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Transitions max-width and max-height
提问by Emanuel Vintil?
So I have an objectinside a divcontainer. The object has the max-width (600px)and max-height (400px)properties set. When I hover the object, the properties are set to noneso the object's widthand heightcan be rendered properly. However when moving the mouse out of the objectit immediatly changes it's widthand heightto the max-width (600px)and max-height (400px)values and after one second it falls back to it's original widthand heightvalues.
所以我有一个object里面的div容器。该对象具有max-width (600px)和max-height (400px)属性集。当我将鼠标悬停在对象上时，属性被设置为none对象的width并且height可以正确呈现。然而从移动的鼠标时object就立刻改变了它width，并height在max-width (600px)和max-height (400px)值和一个后第二它回落到它的原始width和height值。
So how can I do the transitions to make the objectchange it's widthand heightsmoothly, both, when hovering over it and when mousing out.
所以，我该怎么办的过渡，使object它的变化width和height顺利，双方，盘旋在它时和鼠标操作出来的时候。
HTML:
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:
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;
}
回答by Abhitalks
The problem is that you do not have width specified on the parent element.
问题是您没有在父元素上指定宽度。
You have percent widths on your objectas 100%. 100%of what? It is the 100%percent of the parent element's width, your divin this case. If the parent element doesn't have the width specified, then you end up with such problem(s).
您的百分比宽度object为100%。100%什么？它是父元素宽度的100%，div在这种情况下是你的。如果父元素没有指定宽度，那么你最终会遇到这样的问题。
Solution: Specify a width on your wrapper div.
解决方案：在包装上指定宽度div。
Demo: http://jsfiddle.net/abhitalks/Pv4y4/4/
演示：http: //jsfiddle.net/abhitalks/Pv4y4/4/
CSS:
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;
}
Note: Ideally you would also specify heighton the parent.
注意：理想情况下，您还会height在父项上指定。
Update:
更新：
As long as the specified width on the parent divis within the rules of max-widthit will work fine. However, once the initial width breaches or nears the max-widthrule, then the transition will take it beyond the max-widthand then will snap back to the original.
只要父上指定的宽度在div规则范围内，max-width它就可以正常工作。但是，一旦初始宽度违反或接近max-width规则，则过渡将使其超出max-width，然后将恢复到原始宽度。
Problem: Specifying the transition separately on widthand heightwill not work as it tries to transition on those properties only and thus max-es are ignored. Hence the jumping effect.
问题：单独指定转换 onwidth并且height不会起作用，因为它仅尝试在这些属性上转换，因此max-es 被忽略。因此产生了跳跃效应。
Solution: First, Do not specify the max-es as none. Because you are increasing the image size by 200%, specify these also as 200%. Second, specify transition as-is without specific properties. This makes all the relevant properties get transitioned and will help mitigate the problem to some extent.
解决方案：首先，不要将max-es指定为none。因为您将图像大小增加 200%，所以也将这些指定为 200%。其次，在没有特定属性的情况下按原样指定过渡。这使得所有相关属性都得到转换，并有助于在一定程度上缓解问题。
Demo 2: http://jsfiddle.net/abhitalks/Pv4y4/9/
演示 2：http: //jsfiddle.net/abhitalks/Pv4y4/9/
CSS:
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%;
}
Hope that helps.
希望有帮助。
回答by Keith Hackworth
If you want to change max-width/max-heightsmoothly, you must specify the max-*in the minimized state and set width/height to auto:
如果要更改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;
}
回答by VnDevil
Simply, you can do like this
简单地说，你可以这样做
transition: max-width 1s linear .5s;
