Css переход в Opera

Question

У меня есть CSS-переход-анимация, которая работает во все Опере браузеров, но:

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, чтобы проверить его, и он работает. Thx для уточнения и ввода!

Answer 1

Проблема возникает из-за версии Opera. В Opera 12.16all, opacity -Класс обрабатывается неправильно. Чтобы заставить его работать, вы должны указать все свойства, которые хотите оживить.
С Opera 26 все работает отлично.

Это хороший пример, когда вы не можете полностью или полностью выполнить префиксные функции. Убедитесь, что вы все время проверяете при использовании.

Благодаря комментариям по вопросу, который помог мне решить проблему!