IE 和旧浏览器中基于 flex 的过渡的后备答案

【问题标题】：Fallback for flex-basis transition in IE and older browsersIE 和旧浏览器中基于 flex 的过渡的后备
【发布时间】：2015-02-28 04:44:40
【问题描述】：

我目前正在开发一个在悬停时使用 flex-basis 过渡的项目。它在 Chrome 和 FF 中很流畅，但在 IE 或 Safari 中则不然。这有一个很好的后备方案吗？也许是一些js？

CSS

.color {
  opacity:0;
  -o-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  -ms-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  -moz-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  -webkit-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  transition: flex-basis 500ms, opacity 500ms ease-in-out;
}

.color:hover {
  flex-basis: 95%;
  opacity:1;
}

谢谢！

A link to my WIP Codepen

【问题讨论】：

标签： css transition flexbox fallback

【解决方案1】：

所以经过大量研究和测试后，我发现大多数浏览器不承认 flex-basis 是一种过渡属性。不过我确实找到了解决方案。

我现在使用填充而不是 flex-basis，并在悬停时为填充设置动画。除了在所有 IE 浏览器中，这都非常有效。 IE 不将填充识别为过渡属性。保证金本来会更好，但它有点马车。

.color {
  padding:0;
  transition: padding 500ms ease-in-out;
}

.color:hover {
  padding:0 40%;
}

codepen

【讨论】：