Chrome 和 Opera 拒绝从 flex: 0 过渡到 flex: 1

Question

Chrome 和 Opera 绝对拒绝为 flex: 0 和 flex: 1 之间的过渡设置动画，这在 Firefox 中运行良好。最重要的是，一些 Safari 用户报告说它可以工作，但是对于我的 Safari，它甚至无法更改幻灯片。而且它根本不适用于 IE。

是整个想法存在固有缺陷，还是浏览器问题？

HTML:

  <input type="radio" name="radio-btn" id="inb" />
  <figure class='b'>
  </figure>

  <input type="radio" name="radio-btn" id="inc" />
  <figure class='c'>
  </figure>

CSS（其实大部分都是前缀）：

main {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  flex-direction: -webkit-column;
  flex-direction: -moz-column;
  flex-direction: -o-column;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
}

input {
  position: fixed;
  left: 50%;
}

#ina {
  top: 40%;
}

#inb {
  top: 50%;
}

#inc {
  top: 60%;
}

figure {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  flex-direction: -webkit-row;
  flex-direction: -moz-row;
  flex-direction: -o-row;
  flex-direction: row;
  width: 100%;
  height: 100%;
  -webkit-flex: 0;
  -moz-flex: 0;
  -o-flex: 0;
  flex: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.a {
  background: CornflowerBlue;
}

.b {
  background: tomato;
}

.c {
  background: DarkKhaki;
}

#ina:checked + .a {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

#inb:checked + .b {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

#inc:checked + .c {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

Link 代码笔： http://codepen.io/budgieweb/pen/jPwpXE

Answer 1

问题是 flex:0 您可以更改为：

flex: 0.0000001;

这是 https://code.google.com/p/chromium/issues/detail?id=460510 chrome

中的已知问题

Chrome 和 Opera 拒绝从 flex: 0 过渡到 flex: 1

Chrome and Opera refuse to transition from flex: 0 to flex: 1

html

css

cross-browser

blink