Opera 中的 CSS 过渡

Question

我有一个 css-transition-animation，它适用于除 Opera 之外的所有浏览器:

document.getElementsByTagName('button')[0].onclick = function(){

  if(document.getElementById('box').className == 'small'){
    document.getElementById('box').className = '';
  }else{
    document.getElementById('box').className = 'small';
  }

}

#box {
    position: relative;
    max-width: 1036px;
    margin: 0 auto;
    height: 265px;
    opacity:1;
    border:1px solid black;
    -webkit-transition: all 0.5s ease-out, opacity 0.5s ease-in;
    -moz-transition: all 0.5s ease-out, opacity 0.5s ease-in;
    -o-transition: all 0.5s ease-out, opacity 0.5s ease-in;
    transition: all 0.5s ease-out, opacity 0.5s ease-in;
}
#box.small {
    height:0px;
    opacity:0;
    -webkit-transition: all 0.5s ease-out, opacity 0.1s ease-out;
    -moz-transition: all 0.5s ease-out, opacity 0.1s ease-out;
    -o-transition: all 0.5s ease-out, opacity 0.1s ease-out;
    transition: all 0.5s ease-out, opacity 0.1s ease-out;
}

<div id="box"></div>
<button>Make small</button>

当我添加 small 类时，盒子高度应该设置为零，同时漂移到 opacity:0。这工作正常但在 Opera 中不行。

我想知道这是否来自定义 all 和后来的 opacity。这是不允许的吗？还是他的问题有其他原因？

附言:Opera 12.16，win32

PPS:嗯 - 看起来像是 Opera 版本。但是此页面上的所有其他转换都有效。为什么？

PPS:如评论中所述，我将 all 更改为 height 来测试它，结果它起作用了。感谢澄清和输入!

Answer 1

问题发生是因为 Opera 版本。 在 Opera 12.16 中，all、opacity 处理错误。要使其正常工作，您必须指定要设置动画的每个属性。
使用 Opera 26 一切正常。

这是一个很好的例子，您不能依赖前缀功能的完整/正确实现。确保在使用它时测试每个用例。

感谢问题的评论帮助我解决了问题!