Div показывается в течение 1 секунды после того, как я хочу это скрыть

Question

У меня есть два div в одном месте, и я показываю только по одному за раз. У меня есть функция, которая скрывает один div, а затем показывает другой, и наоборот. Моя проблема в том, что один из элементов div отображается в углу контейнера после того, как я скрываю его в течение 1 секунды, он изначально находится по центру, но когда я скрываю его, я устанавливаю ширину и высоту равными 0. Когда он находится в углу, стиль ушел, и я вижу только текст из него и кнопку, которую я использую, которая содержит функцию для изменения div, и она исчезает через секунду. Я не уверен, почему это происходит, и был бы признателен за помощь.

вот пример HTML этого -

<div class='event-container'>
                <div class='events hidden'>
                    <span class='no-Events event-message'>no Events this Day</span>
                    <span class='event-title event-message'></span>
                    <span class='event-desc event-message'></span>
                    <button class='show-event-form rotate'>Submit</button>
                </div>
                <form class='new-event-form'>
                    <legend>Submit New Event</legend>
                    <input id='new-event-title' type='text' name='title' placeholder='title'>
                    <input id='new-event-desc' type='text' name='desc' placeholder='desc'>
                    <input type='submit' class='submit-event rotate' value='submit'>
                </form>
  </div>

Либо будет отображаться div .events, либо форма / .new-event-form будет отображаться / скрываться.

Я использую эти классы CSS, чтобы показать / скрыть их

.hidden {
    height: 0; opacity: 0; width: 0;
    transition: height 0ms 400ms, opacity 200ms 0ms, width 0ms 0ms;
}

.visible {
    height: 100%; opacity: 1; width: 100%;
    transition: height 200ms 0ms, opacity 600ms 200ms, width 0ms 0ms;
}

вот css для .new-event-form и .events

.new-event-form{
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
}

.events{
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: center; /*center children vertically*/
}

И эта функция изменяет div'ы между классами show / hide

const hideShowEventsDiv = ()=> {
     let eventsDiv = document.querySelector('.events');
     let newEventForm = document.querySelector('.new-event-form');

     if(eventsDiv.classList.contains('hidden')){
         //show Events
        newEventForm.classList.add('hidden');
        newEventForm.classList.remove('visible');
        eventsDiv.classList.remove('hidden');
        eventsDiv.classList.add('visible');
     } else {
         //show new Event Form
        eventsDiv.classList.remove('visible');
        eventsDiv.classList.add('hidden');
        newEventForm.classList.remove('hidden');
        newEventForm.classList.add('visible');
     }   
 }

eventListner для этого

// Отправить форму и показать событие или форму нового события

 document.addEventListener('click', (e)=>{
     if(e.target.classList.contains('rotate')){
        e.preventDefault();
        newEvent.submit();
        newEvent.clear();
     //  ---> this one hides/shows the div 
       hideShowEventsDiv();
     }
 });

Эта проблема возникает только для Div .events. Форма .new-event-form не имеет никаких проблем с замиранием или отображением в углу, а затем исчезает, когда я пытаюсь это скрыть, то есть только .events div с этой проблемой

Answer 1

Если вы говорите о том, как текст даты («Нет событий в [дата]») и кнопка все сжаты во время перехода, это потому, что вы сжимаете их родителя, устанавливая его свойство width в 0. установка свойства overflow на hidden в вашем скрытом классе решит эту проблему:)

window.onload = ()=>{
  let btn = document.querySelector('#toggler');
  btn.addEventListener('click', function(){
    // grab the events div
    let eventsDiv = document.querySelector('#events');
    // grab our mock form
    let eventForm = document.querySelector('#event-form');
    // toggle does the conditional you had before
    // it ascts like a switch, removing the class if its there
    // and adding it in otherwise.
    eventForm.classList.toggle('hidden');
    eventsDiv.classList.toggle('hidden');
  });
};

.big-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px;
}

.container {
  height: 200px;
  display: flex;
  flex-direction: column;
  transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out;
  text-align: center;
}

.container-item {
  background-color: orange;
  height: 100px;
  margin: 15px;
  box-shadow: 0 5px 10px 2px black;
}

.hidden {
  height: 0;
  opacity: 0;
  width: 0;
  overflow: hidden;
}

#events {
  background-color: green;
}

#event-form {
  background-color: red;
}

#placeholder {
  background-color: pink;
  height: 200px;
  width: 200px;
}

<div class="big-container">
  <div class="big-container" id="placeholder">
    <input type="button" value="toggle visibility" id="toggler">
  </div>
  <div class="big-container">
    <div class="container" id="events">
      <span class="container-item">There are no events on November 17, 2018</span>
      <span class="container-item"></span>
      <span class="container-item"></span>
      <button class="container-item" id="btn-events">I am a button</button>
    </div>
    <div class="container hidden" id="event-form">
      <div class="container-item"></div>
      <div class="container-item"></div>
      <div class="container-item"></div>
      <button class="container-item" id="btn-submit">I am another button</button>
    </div>    
  </div>
</div>

Кроме того, вот рабочий пример и модифицированная версия вашей ручки :)