Question

我目前正在开发一个在悬停时使用弹性基础转换的项目。它在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

Answer 1

经过大量的研究和测试后，我发现大多数浏览器都没有将flex-basis视为过渡属性;但是我确实找到了解决方案。

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

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

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

codepen

IE和旧版浏览器中基于flex-basis过渡的回退

1 个答案: