Как сделать чтобы и появление и исчезновение элемента было плавным?

Для того, чтобы сделать появление и исчезновение элемента плавным, можно использовать анимацию CSS.

Существует несколько способов реализации анимации в CSS, но одним из самых простых и распространенных является использование свойства transition.

Прежде всего, убедитесь, что элемент, который вы хотите анимировать, имеет установленное значение display, отличное от none. Например, установка значения display: block или display: inline будет правильным выбором. Если элемент находится в состоянии display: none, то анимация не будет работать.

Затем установите свойство transition для элемента. Это свойство позволяет задать время продолжительности анимации, а также любые другие свойства CSS, которые вы хотите анимировать. Например, чтобы сделать плавное появление и исчезновение элемента, установите свойство opacity и время продолжительности анимации в свойстве transition.

Пример кода:

.element {
  opacity: 0;
  transition: opacity 0.5s;
}

.element.visible {
  opacity: 1;
}

В этом примере по умолчанию элемент имеет нулевую прозрачность (opacity: 0) и установленное свойство transition, чтобы анимировать изменение прозрачности (opacity) в течение 0,5 секунды.

Затем, чтобы плавно показать элемент, вам нужно добавить класс visible к элементу, который устанавливает прозрачность на полную (opacity: 1). Это можно сделать с помощью JavaScript или с помощью CSS псевдокласса :hover или событий, таких как click.

Пример кода:

.element:hover {
  opacity: 1;
}

.element.clicked {
  opacity: 1;
}

// Использование JavaScript для добавления класса на клик
document.querySelector('.element').addEventListener('click', function() {
  this.classList.add('clicked');
});

В этом примере при наведении на элемент, анимация будет плавно показывать элемент. Когда элемент щелкают, класс clicked добавляется к элементу, и прозрачность остается на полной.

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