Как сделать анимацию на JavaScript?

Question

[Антон]

function open_block() {

    var contents = document.getElementById('contents');

        if (contents.style.display == 'none') {

            contents.style.display = 'block';

        }

        else {

            contents.style.display = 'none';

        }

    }

     

function close_block() {

    var contents = document.getElementById('contents');

    contents.style.display = 'none';

}

Есть код, но не знаю как добавить анимацию, коротко, этот код открывает и показывается скрытый блок, я хочу добавить анимацию плавную, что бы блок не резко показывался, а плавно появлялся, подскажите как, я в JS нубик :с

Comments

[Андрей]

sizest:
Я думаю может это тебе поможет:
https://www.w3schools.com/jquery/eff_toggle.asp
Через этот метод можно задать скорость и анимацию при появлении

[Антон]

Андрей: Чет не особо, не втыкаю куда чего вставлять 0_о

Answer 1

[Александр Ковалев]

Вы можете сделать свое решение через CSS3 анимацию и JavaScript. Это очень просто
jsfiddle.net/dRpWv/665

Answer 2

[kulaeff]

Поскольку свойство display нельзя анимировать, то тут нужна маленькая хитрость. Заключается она в том, что вы сначала показываете прозрачный блок, а затем анимируете свойство opacity. И наоборот, если вам нужно плавно скрыть блок, сначала анимируете opacity, а после того, как анимация завершилась, делаете display: none.
Тут пример.