Угарный марионеточный спектакль с видимостью visible.

Принцип Марионетки:changeBtn.classList.add('visible');

Система управление куколкой. Я, управляю кнопочкой changeBtn через JS-логику, и не трогаю куклу руками CSS класс:visible . Я дёргаю ее за ниточку добавляя к ней внутрь display:block(закон физики) управление производится через Семантическому Контейнер id:changeBtn. А сама кукла уже танцует по Законам Физики, которые я прописал в своём CSS-слое.

Кукла:HTML-Скелет changeBtn это мой Семантический Контейнер, значение в кнопке триггер button: Сменить город. Она существует в Скелете и ждёт приказа.

CSS-Внешний Вид ниточки: В моём style.css я прописал правило .change-btn.visible { display: block; }. Я выставил физические оси вертикаль/горизонталь через display задавая физику через block. Но я могу прописать там всё, что я захочу: opacity, transform, animation.

JS-Логика управление спектаклем: Я дёргаю за ниточку через classList.add('visible'). Я не лезу в стили напрямую. Я просто отдаю приказ, и CSS-марионетка сама меняет свой стиль: появляется, исчезает, меняет цвет, размер, анимируется.