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。这是不允许的？或者他的问题是另一个原因？

PS：Opera 12.16，win32

PPS：好吧 - 看起来像是Opera版本。但是这个页面上的所有其他转换都有效。为什么呢？

PPS：正如评论中所提到的，我使用all更改了height来测试它，并且它有效。谢谢澄清和输入！

Answer 1

由于Opera版本而出现问题。在Opera 12.16中all，opacity - 案件处理错误。要使其工作，您必须指定要设置动画的每个属性使用Opera 26它可以正常工作。

这是一个很好的示例，您无法完全依赖于前缀功能的完整/正确实现。无论如何，请确保在使用它时测试每个用例。

感谢有关帮助我解决问题的问题的评论！

Opera中的Css过渡

1 个答案: