CSS-переход в сочетании с JS clickEvent

Обнаружена следующая проблема при попытке объединить переходы CSS с обработчиками событий JS. Я знаю, как использовать свойство перехода CSS, например:

div {
    width: 50px;
    height: 50px;
    background: blue;
    transition: width 2s;
}

div:hover {
    width: 300px;
}

<div></div>

Я также знаю, как разместить обработчик кликов на элементе DOM следующим образом:

let eventDiv = document.querySelector('#clickMe');
let hiddenDiv = document.querySelector('#hiddenDiv');

eventDiv.onclick = () => {
  if (hiddenDiv.style.display === 'block') {
    hiddenDiv.style.display = 'none'
  } else{
  hiddenDiv.style.display = 'block';
    }
}

#clickMe{
  width: 100px;
  height: 50px;
  background-color: blue;
}

#hiddenDiv {
  width: 100px;
  height: 50px;
  background-color: green;
  display: none;
}

<div id = "clickMe"></div>
<div id = "hiddenDiv"></div>

Вопрос

Как мне объединить эти два и получить переход CSS (<div> не должен появляться сразу, а должен появиться), когда я переключаю видимость <div> с событием onclick JS?

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

— 15.03.2018 14:55

Вы не можете перейти на display.

— 15.03.2018 14:57

свойства отображения не анимируются

— 15.03.2018 14:57

javascript html css css-transitions

15.03.2018 14:52

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 2

Проблема здесь в том, что вы не можете передать transition свойству display:

div {
    width: 50px;
    height: 50px;
    background: blue;
    transition: 2s;
}

div:hover {
    display:none;
}

<div></div>

Что вы можете сделать, так это использовать вместо него opacity.

let eventDiv = document.querySelector('#clickMe');
let hiddenDiv = document.querySelector('#hiddenDiv');

eventDiv.onclick = () => {
  if (hiddenDiv.style.opacity === '1') {
    hiddenDiv.style.opacity = '0'
  } else{
  hiddenDiv.style.opacity = '1';
    }
}

#clickMe{
  width: 100px;
  height: 50px;
  background-color: blue;
}

#hiddenDiv {
  width: 100px;
  height: 50px;
  background-color: green;
  opacity: 0;
  transition: 2s;
}

<div id = "clickMe"></div>
<div id = "hiddenDiv"></div>

ВАЖНЫЙ Если вы решите использовать это свойство, не забудьте изменить display на none после завершения перехода, если вы не хотите, чтобы это был block.

15.03.2018 15:00

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

Согласно моему комментарию, чтобы объединить js и переход, вам нужно добавить и удалить класс, который изменяет свойство, которое вы хотите перенести.

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

let eventDiv = document.getElementById('clickMe');
let hiddenDiv = document.getElementById('hiddenDiv');

eventDiv.onclick = () => {
  if (hiddenDiv.classList.contains("hide")) {
    hiddenDiv.classList.remove("hide");
  } else{
    hiddenDiv.classList.add("hide");
  }
}

#clickMe{
  width: 100px;
  height: 50px;
  background-color: blue;
}

#hiddenDiv {
  width: 100px;
  height: 50px;
  background-color: green;
  overflow:hidden;    
  transition: height 1s;
}

#hiddenDiv.hide {
  height: 0;
}

<div id = "clickMe"></div>
<div id = "hiddenDiv" class = "hide"></div>

15.03.2018 15:02

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

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

JQuery запускает родительские функции перед дочерними (slideUp и slideDown)

Ширина адаптивного письма в Gmail

Как установить опцию экспорта csv на кнопку в круговой диаграмме визуализации google

Застрял на этом в течение 3 недель: txtOutput не отображает logicalid.value. Возврат неопределенной ошибки. Генератор относительных ссылок

Bootstrap странным образом позиционирует строку <hr>

Как я могу повлиять на один div из 8 div одного и того же класса с помощью jQuery?

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

Перенаправление на другую страницу с информацией о нажатии на div

Datatable не отвечает

CSS-переход в сочетании с JS clickEvent

Вопрос

Ответы 2

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

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