在 IE10/11 中使用 Calc() 的过渡高度答案

【问题标题】：Transition Height with Calc() in IE10/11在 IE10/11 中使用 Calc() 的过渡高度
【发布时间】：2017-02-16 19:25:18
【问题描述】：

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

现在接受的答案肯定适用于 IE 11 以及我测试过的其他浏览器，但是对于我正在创建的 web 应用程序，我只需要转换 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-height 与 max-width 的表现不同？有什么我错过的吗？ IE10/11有过渡高度的解决方案吗？

【问题讨论】：

标签： css internet-explorer css-transitions internet-explorer-11

【解决方案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 解决方案，请发布它，我会接受它作为答案。

【讨论】：