CSS Transitions max-width and max-height

所以我有一个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;
}

小提琴

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

你的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-指定为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%;
}

希望对你有帮助。

如果要顺利更改max-width/max-height，必须指定处于最小化状态的max-*，并设置width/height为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;
}

简单地说，您可以这样做

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

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

更新:

相关内容

最新更新

热门标签：