Question

我在同一位置有两个div，一次只能显示一个。我有一个函数，它隐藏一个div，然后显示另一个，反之亦然。我的问题是，当我将其隐藏1秒钟后，其中一个div会显示在容器的一角，它原本是居中的，但是当我将其隐藏时，我将width和height设置为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>

.events div将显示或.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;
}

这是.new-event-form和.events的CSS

.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

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');
     }   
 }

此事件的列表

//提交表单并显示事件或新事件表单

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

仅对于.events Div，才出现此问题。 .new-event-form表单在拐角处褪色或显示没有任何问题，然后在我尝试将其隐藏时消失了，这只是存在此问题的.events div

Answer 1

如果您要谈论的是日期文本（“ [date]上没有任何事件”）和按钮在转换过程中如何受到挤压，那是因为您通过将其父项的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>

此外，这是working example和modified version of your pen：）

我要隐藏Div后显示1秒钟

1 个答案: