Анимация переключения темного режима с помощью CSS

Анимация переключения темного режима с помощью CSS

HTML

Разметка HTML довольно проста для понимания. Все, что вам нужно сделать, это создать контейнер для значков, которые мы собираемся использовать, из fontawesome и вложить соответствующие divs, содержащие значки, внутрь контейнера.

<div class="container">
   <div class="sun sun-logo">
      <i class="fas fa-sun"></i>
   </div>
   <div class="moon moon-logo">
      <i class="fas fa-moon"></i>
   </div>
</div>

CSS

.container{
    position: relative;
}

.sun, .moon{
    font-size: 10rem;
    width: fit-content;
    height: fit-content;
}

.moon{
    position: absolute;
    inset: 0;
}

Установите положение контейнера равным, relativeа положение контейнера луны - так, absoluteпотому что мы разместим значок луны в том же положении, что и значок солнца.

Вот что интересно. Вместо использования top: 0; bottom: 0; left: 0;и right: 0;вы можете использовать inset: 0;для получения того же результата. Оно работает!

Кроме того, установите heightи widthконтейнера солнца и луны на fit-content. При этом высота и ширина контейнера будут соответствовать высоте и ширине содержимого внутри него.

И, чтобы изменить размер значка fontawesome, просто измените его размер font-size.

.moon-logo{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
}

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

translateY(20%)Декларация будет компенсировано значок луны вниз вдоль оси ординат на 20% от высоты его родителя элемента.

Точно так же rotateZ(50deg)объявление повернёт значок луны по оси Z на 50 градусов.

.sun-logo{
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
}

Таким же образом мы установим начальные свойства для значка солнца.

.animate-sun{
    opacity: 0;
    transform: translateY(20%) rotateZ(100deg);
    color: aliceblue;
}

Теперь мы установим окончательные свойства значка солнца, в который он будет переходить.

.animate-moon{
    opacity: 1;
    transform: translateY(0%) rotateZ(0deg);
    color: aliceblue;
}

Кроме того, мы установим окончательные свойства значка луны, в который он будет переходить. Здесь следует отметить один цвет значков по умолчанию black, поэтому, если вы хотите изменить цвет значка, определите его colorсвойство.

Но подождите, мы еще не использовали это transitionсвойство, так как же оно будет переходить из одного состояния в другое? Да, это единственное, что осталось сделать в части CSS.

.moon-logo{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
    transition: all 1s ease-out;
}
.sun-logo{
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
    transition: all 1s ease-out;
}

body{
    transition: background-color 1s;
}

.dark{
    background-color: black;
}

Мы будем использовать класс выше , чтобы изменить background-colorиз bodyкогда переход из иконок будет.

Вот и все. Ваша часть CSS готова.

Теперь перейдем к части JavaScript. Мы будем использовать JavaScript для toggleклассов по clickсобытию.

JavaScript

document.querySelector(".container").addEventListener("click", () => {
    document.querySelector(".sun-logo").classList.toggle("animate-sun");
    document.querySelector(".moon-logo").classList.toggle("animate-moon");
    document.querySelector("body").classList.toggle("dark");
})

Здесь мы добавили eventListenerэлемент контейнера, чтобы при нажатии на контейнер он переключал классы CSS для соответствующих элементов.
Это означает, что, если класс CSS отсутствует в classListэлементе, toggleфункция добавит класс CSS classListв соответствующий элемент.

И, если класс CSS уже присутствует в classListэлементе, он удалит его.

На classListсамом деле это a, DOMTokenListно мы не будем вдаваться в подробности этого.

Это оно. Вот окончательный результат.