Css Opera 中的过渡

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>

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

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

PS: Opera 12.16, win32

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

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

Answer 1

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

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

感谢问题的评论，帮我解决了问题！

Css Opera 中的过渡

Css transition in Opera

css

opera

transition