Opera 中的 CSS 过渡答案

【问题标题】：Css transition in OperaOpera 中的 CSS 过渡
【发布时间】：2015-01-16 11:34:44
【问题描述】：

我有一个 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 时，box-height 应设置为零，同时漂移到 opacity:0。这可以正常工作，但在 Opera 中不行。

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

PS：Opera 12.16、win32

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

PPS：如 cmets 中所述，我将 all 更改为 height 以对其进行测试，瞧，它可以工作了。感谢您的澄清和输入！

【问题讨论】：

见this website?。它对这样的事情有很大帮助。我们在说什么版本的歌剧？
@jbutler483 - 抱歉忘记了。已添加！
如果是all，则可以改成height 0.5s ease-out, opacity 0.1s ease-out;进行测试
根据规范，首先使用 all 应该没问题：“如果在 'transition-property' 的值中多次指定属性（无论是单独指定的，通过简写包含它，或通过'all'值），然后开始的转换使用与'transition-property'值中的last项对应的索引处的持续时间、延迟和计时函数这需要为该属性设置动画。”
@Harry：与其说是“实施差距”，不如说是“新引擎”案例（在 Opera 12 之后 Presto 被 Blink 取代）。 Fuzzyma：与其在您的问题中添加您为使其发挥作用所做的工作，不如自己写一个包含您的解决方案的答案，然后接受它？这样，有类似问题的人以后可以从中受益；就目前而言，他们必须阅读您的 PPS 才能了解即使有解决方案，您的问题仍将显示为“未回答”。

标签： css transition opera

【解决方案1】：

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

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

感谢帮助我解决问题的问题的 cmets！

【讨论】：