Переключатель боковой панели Javascript для добавления анимации (без jQuery)

У меня есть боковая панель слева, которая переключает отображение и блокировку.

Вот css:

.hide {
  display: none;
}

.show {
  display: block;
}

И функция javascript:

function elToggle() {
  var s = document.getElementById('sidebar');
  if (s.classList.contains('hide')) {
    s.classList.remove("hide");
    s.classList.add("show");
  } else {
    s.classList.remove("show");
    s.classList.add("hide");
  }
}

Вышеприведенное работает нормально, но мне нужна плавная анимация (вход и выход), когда он скрывается и показывается.

Как мне это сделать?

javascript css css-animations

12.12.2020 10:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

563

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если вы хотите плавную анимацию, вам нужно изменить css

Например, если вы хотите, чтобы он появлялся и исчезал,

.hide {
  display: block;
  position: absolute;
  opacity: 0;
  top: 0; left: 0;
  bottom: 0; right: 0;
  transition: opacity 1s;
}

.show {
  display: block;
  position: absolute;
  opacity: 1;
  top: 0; left: 0;
  bottom: 0; right: 0;
  transition: opacity 1s;
}

Я не могу написать все переходы, так что это зависит от того, как вы хотите, чтобы переход происходил

Чтобы он не занимал места

.hide {
  display: block;
  position: absolute;
  width: 0;
  top: 0; left: 0;
  bottom: 0; right: 0;
  transition: width 1s;
  overflow: hidden;
}

.show {
  display: block;
  position: absolute;
  width: 100%;
  top: 0; left: 0;
  bottom: 0; right: 0;
  transition: width 1s;
  overflow: hidden;
}

Для скольжения внутрь и наружу используйте это

.hide {
  display: block;
  position: absolute;
  width: 100%;
  top: 0; left: 0;
  bottom: 0; right: 0;
  transition: left 1s;
  overflow: hidden;
}

.show {
  display: block;
  position: absolute;
  width: 100%;
  top: 0; left: 100%;
  bottom: 0; right: 0;
  transition: left 1s;
  overflow: hidden;
}

/* Note: To use this, the container should have overflow set to hidden and display relative  */

Примечание: убедитесь, что контейнер, содержащий элементы, имеет отображение относительного

Все это эффекты затухания, которые плохо сочетаются с боковой панелью. Я искал эффект слайда и выхода

— 12.12.2020 11:31

Хорошо, это тоже легко. Все дело в css. Дайте мне 5 минут, чтобы обновить

— 12.12.2020 11:49

Это зависит от ваших знаний CSS, вы можете изменить его, как хотите. Также используйте left или right в зависимости от положения панели навигации.

— 12.12.2020 11:58

12.12.2020 11:06

Вы должны использовать opacity. Потому что не работает display анимация(transition).

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

.show {
  opacity: 1;
  transition: opacity 0.5s;
}

Все это эффекты затухания, которые плохо сочетаются с боковой панелью. Я искал эффект слайда и выхода

— 12.12.2020 11:31

12.12.2020 11:19

Другие вопросы по теме

Как проверить последний элемент, зависший с помощью jquery

Как я могу создать полноценный предварительный загрузчик страниц?

Флажок категории и подкатегории с использованием javascript и CSS

Как сделать вертикальный прямоугольник с рамкой слева от экрана и горизонтальный прямоугольник в верхней части веб-страницы?

Кнопки jQuery при нажатии на кнопку jQuery не работают

Как изменить ширину линии значка React?

Почему нижний край обрезается?

Полупрозрачное наложение поверх HTML-видео всегда позади видео

Bootstrap v5.0.0-beta1 - ml-auto не работает для панели навигации

Элементы навигационной панели подпрыгивают при наведении

Переключатель боковой панели Javascript для добавления анимации (без jQuery)

Ответы 2

Другие вопросы по теме

Похожие вопросы