Question

在我们开始之前我想说我已经看过Using calc() to transition width and height in IE，但我的问题与接受这个问题的答案有关。

现在接受的答案肯定适用于IE 11以及我测试过的其他浏览器，但是对于我正在创建的webapp，我只需要转换Div的高度，而不是宽度。因此，我重新创建了已接受的答案解决方案，将max-width更改为max-height，但这似乎与高度仍未转换的方式相同。

这是修改后接受的答案的小提琴： https://jsfiddle.net/esfqqm4p/

.container{
  height: 100px;
  width: 200px;
}

.block {
    width: 100%;
    height: 100%;
    background-color: red;
    transition: all 1s ease-in-out;
    margin: 10px;
    padding-left: 10px;
}

.doesntwork:hover {
    max-height: 50%;
    height: 100%;
}
.works:hover {
    height: 175px;
}

与max-width相比，为什么max-height在这种情况下的表现不同？有没有我错过的东西？在IE10 / 11中是否有过渡高度的解决方案？

Answer 1

所以我昨天花了一些时间，今天尝试了多个纯CSS解决方案，但无济于事。最后我决定使用JQuery Animate函数来实现我在IE中运行良好的目标。

这是展示解决方案的小提琴：

https://jsfiddle.net/uwrosa3m/

function startAnim(){
    if(!$('.block').hasClass("shrunk")){
    $('.block').addClass("shrunk");
    $('.block').animate({ 'height': '50%' }, 500);
  }
  else{
    $('.block').removeClass("shrunk");
    var height = ($('.block').height() * 2) - 10;
    $('.block').animate({ 'height': height }, 500);
  }
}

不是在我的CSS中使用calc（）来计算高度，而是让JQuery处理这个问题。

如果有人能找到纯CSS解决方案，那么请发布它，我会接受它作为答案。

在IE10 / 11中使用Calc（）过渡高度

1 个答案: