使用calc（）来转换IE中的宽度和高度 [英] Using calc() to transition width and height in IE

问题描述

我遇到了一个问题，试图使用CSS转换来更改对象的尺寸与calc（）在IE中不工作。

I've come across an issue today where trying to use CSS transitions to change an object's dimensions with calc() aren't working in IE. Or, rather, they're working in the sense that the calculated values are being applied but the transition rules are being ignored.

看到这里的一个例子：http://jsfiddle.net/32Qr7/

See an example here: http://jsfiddle.net/32Qr7/

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

.block:hover {
  width: calc(100% - 50px);
  height: calc(150px + 10%);
}

在此示例中，div存在，它的宽度，背景颜色在一秒钟的过程中在盘旋。在IE中，背景颜色仍然平滑地动画，但是宽度和高度的变化是即时的。

In this example, a div exists which changes its' width, height, and background-color over the course of one second on hover. In IE the background color still animates smoothly, but the width and height change is instantaneous.

这是一个非常大的问题，因为我有一个响应web应用程序，从侧面滑出，其余的布局必须进行调整以补偿。因为我处理大量的屏幕尺寸，我不能使用硬编码的值。

This is pretty big issue for me as I have a responsive web app with drawers that slide out from the side, and the rest of the layout has to adjust to compensate. Since I'm dealing with a multitude of screen sizes I can't use hard-coded values.

（是的，我看着IE 10 + 11：使用calc（）的CSS转换不起作用希望对于一个解决方案，但这个问题不涉及维度更改，因此接受的解决方案，对我来说不工作。）

(And yes, I looked at IE 10 + 11: CSS transitions with calc() do not work hoping for a solution there, but that question doesn't involve dimension changes, and as such the accepted solution there doesn't work for me.)

有人知道一个此问题的解决方法，或有任何其他替代策略建议？我希望能够在CSS中做到这一点，并避免不得不使用jQuery动画技术或其他方法。

Does anyone know of a workaround for this issue, or have any other alternate strategies to suggest? I'm hoping to be able to do it in CSS and avoid having to fall back to using jQuery animation techniques or somesuch.

推荐答案

似乎我找到了一个解决方法之后，一点（至少它适用于 IE10 和 IE11 ）。我使用 max-width 属性代替 calc（）方法。 CSS for hover：

Seems like I have found a workaround after playing a bit (at least it works for IE10 and IE11). I have used the max-width property instead for calc() method. CSS for hover:

.notworks:hover {
    width: 100%;
    max-width: calc(100% - 50px);
    height: 175px;
}

示例

这篇关于使用calc（）来转换IE中的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！