Как сделать два плавающих divs плавно следуя друг за другом при перемещении с помощью перехода?

Question

Мне нужна помощь с небольшим количеством CSS-кодирования. То, что я в настоящее время пытаюсь сделать, - это боковая панель, которая скользит (например, на мобильных страницах), но вместо того, чтобы сделать положение абсолютным, я сделал два divs float внутри обертки.

Мои навыки объяснения не так уж велики, поэтому я продолжу, предоставив вам довольно простой пример для демонстрации.

HTML-:

<!-- Using to toggle the sidebar --> 
<input type="checkbox" id="toggle" hidden="hidden"> 

<!-- The wrapper --> 
<div class="wrapper"> 

    <!-- The content --> 
    <div class="content"> 
    <label for="toggle">Show</label> 
    <!-- Content goes here --> 
    </div> 

    <!-- The sidebar --> 
    <aside class="sidebar"> 
    <label for="toggle">Hide</label> 
    <!-- Sidebar content goes here --> 
    </aside> 

</div> 

CSS-:

/* Just some general settings */ 
* { margin: 0; padding: 0; } 

html, body { 
    width: 100%; 
    height: 100%; 
} 

/* When toggle - do this */ 
#toggle:checked + .wrapper > .content { 
    margin-left: -25%; 
    transition: all ease 1s; 
} 

/* The wrapper */ 
.wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    transition: all ease 1s; 
} 

/* The content */ 
.wrapper > .content { 
    width: 100%; 
    height: 100%; 
overflow: auto; 
    float: left; 
    background-color: #2ecc71; 
    transition: all ease 1s; 
} 

/* The sidebar */ 
.wrapper > .sidebar { 
    width: 25%; 
    height: 100%; 
    overflow: auto; 
    float: left; 
    background-color: #27ae60; 
    transition: all ease 1s; 
} 

Как вы можете видеть, когда вы либо нажмите кнопку "Показать" или "Скрыть" на боковой панели не появляются или исчезают гладко. Есть ли способ сделать его гладким?

Answer 1

Самый простой способ - просто переключить класс на тег тела. Например, .sidebar-open:

.wrapper, 
.sidebar { 
    transform: translateX(0); 
    transition: all .5s ease-in-out; 
}  

.sidebar-open .wrapper, 
.sidebar-open .sidebar { 
    transform: translateX(-200px); 
}