Javascript добавить анимацию

Question

У меня есть простой скрипт, чтобы показать и заменить пользовательский div

    <script type="text/javascript">
    function switchVisible() {
        if (document.getElementById('chat-opened')) {

            if (document.getElementById('chat-opened').style.display == 'none') {
                document.getElementById('chat-opened').style.display = 'block';
                document.getElementById('chatbox').style.display = 'none';
            }
            else {
                document.getElementById('chat-opened').style.display = 'none';
                document.getElementById('chatbox').style.display = 'block';
            }
        }
    }
</script>

Я хочу добавить анимацию, например, прокрутку или что-то еще.Любая помощь?Спасибо за ответы, ребята, я действительно новичок в JavaScript!

Answer 1

CSS-переходы могут быть отличным вариантом для добавления анимационных эффектов к элементам.

В вашем CSS используйте идентификаторы chatbox и chat-open, чтобы дать эффект затухания, когда вы устанавливаете его отображение на none, и аналогично, когдаВы устанавливаете его отображение как блок.Это даст вам плавный эффект затухания, когда ваши элементы исчезнут и снова появятся.

Для получения дополнительной информации о переходных эффектах обратитесь к руководству Mozilla по переходам CSS

Переходы CSS MDN

ОБНОВЛЕНИЕ

Как указано в комментариях Филиппа, переход нельзя применить к свойству отображения.

Вместо этого можно использовать свойство видимости и применитьэффект перехода к нему.

Но имейте в виду, что свойство видимости только «скрывает» ваш элемент.Это все еще занимает место, которое это сделало.