Javascript-форум - плавный переход через javascript

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - плавный переход через javascript (https://javascript.ru/forum/xhtml-html-css/44415-plavnyjj-perekhod-cherez-javascript.html)

плавный переход через javascript

помогите реализовать плавный переход через javascript :help:

есть блок, изначально у него display : none
при клике, мне нужно чтобы он стал блочным и у него был плавный переход opacity
но никак не хочет работать...

я пытался реализовать по разному

но работает только тогда когда

в css уже стоит display: block
и только когда использую box_hider.style.opacity = '0.9'; (если пытаюсь через javascript поменять display на block то не работает)

по другому никак не хочет работать....

подскажите как сделать как чтобы при клике, display ставал block и плавно переходило opacity

http://learn.javascript.ru/play/Ib6W1b

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      #myDiv {
        background: #000;
        height: 100px;
        width: 100px;
        transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -webkit-transition: opacity 0.5s;
      }
      .hide {
          opacity: 0;
      }
    </style>
  </head>
  
  <body>
    <div id="myDiv"></div>
    
    <script>
      var myDiv = document.getElementById('myDiv').onclick = function() {
        var hide = this.classList.contains('hide');
        this.classList[hide ? 'remove' : 'add']('hide');
      }
    </script>
  </body>

</html>

Ну, а с display уже сами. :)