Форум

blacklool · #1 (**permalink**) 18.01.2014, 21:17

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

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

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

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

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

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

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

ruslan_mart · #2 (**permalink**) 19.01.2014, 16:04

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 уже сами.

Форум

Справочник

Discord чат

Курсы javascript