CSS анимация перевода не работает, когда отображается родитель

Question

Есть похожие вопросы, такие как это и это , но не решайте эту ситуацию.

Цель состоит в том, чтобы сдвинуть меню на экран с помощью CSS перевод, когда отображается его родитель. Однако показ родительского элемента с последующим применением класса CSS для запуска перевода происходит мгновенно, а не со временем. По сути, анимация отсутствует.

JavaScript можно использовать для перемещения дочернего элемента на экран, но цель состоит в том, чтобы сохранить как можно больше логики анимации c в CSS.

Установка непрозрачности на 0 не работает, потому что нам нужно, чтобы меню и его родительские элементы не занимали места и не были частью макета.

Codepen: https://codepen.io/Crashalot/pen/YzXmjYj

function toggleSidebar() {
  $("#sidebar").toggleClass("show");
}


$("#button").on("click", function() {
    toggleSidebar();
});

body {
  margin: 0;
  padding: 0;
}

#button {
  position: fixed;
  top: 0;
  left: 200px;
  width: 150px;
  height: 50px;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8;
  cursor: pointer;
}

#sidebar {
  display: none;
}

#sidebar.show {
  display: block;
}

.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: red;
  z-index: -1;
}

.menuBox {
  width: 200px;
  height: 100vh;
  background: blue;
	transition: 0.3s ease-in-out;				       
  transform: translate(-100%);
}

#sidebar.show .menuBox {
  transform: translate(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
  <div class="overlay"></div>
  <div class="menuBox"></div>
</div>


<div id="button">CLICK ME</div>

Answer 1

Вы не можете анимировать отображение: нет; Установите непрозрачность 0, а затем 1 в классе переключения. Вот CodePen для вас. ;)

Я добавил кнопку для события переключения. Дайте мне знать, если вам нужна дополнительная помощь!

введите описание ссылки здесь

$(".btn").on("click", toggleSidebar);

function toggleSidebar() {
  $("#sidebar").toggleClass("show");
}

body {
  margin: 0;
  padding: 0;
}

#sidebar {
  opacity: 0;
  transition: all 300ms ease-in-out;
}

#sidebar.show {
  display: block;
  opacity: 1;

}

.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: red;
  z-index: -1;
}

.menuBox {
  width: 200px;
  height: 100vh;
  background: blue;
	transition: 300ms ease-in-out;				       
  -webkit-transform: translate(-100%);
}

#sidebar.show .menuBox {
  -webkit-transform: translate(0);
}

.btn {
  position: absolute;
  top: 10px;
  left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
  <div class="overlay"></div>
  <div class="menuBox"></div>
</div>

<button class="btn">Click</button>

Answer 2

Вы должны рассмотреть анимацию. Анимация запустится автоматически, когда элемент появится на экране

function toggleSidebar() {
  $("#sidebar").toggleClass("show");
}


$("#button").on("click", function() {
  toggleSidebar();
});

body {
  margin: 0;
  padding: 0;
}

#button {
  position: fixed;
  top: 0;
  left: 200px;
  width: 150px;
  height: 50px;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8;
  cursor: pointer;
}

#sidebar {
  display: none;
}

#sidebar.show {
  display: block;
}

.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: red;
  z-index: -1;
}

.menuBox {
  width: 200px;
  height: 100vh;
  background: blue;
  transform: translate(-100%);
  animation: show 0.3s ease-in-out forwards;
}

@keyframes show {
  to {
    transform: translate(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
  <div class="overlay"></div>
  <div class="menuBox"></div>
</div>


<div id="button">CLICK ME</div>

Обновление отображения до значения, отличного от none, запустит все анимации, примененные к элементу свойством animation-name, а также все анимации применяются к потомкам с отображением, отличным от none. ^ref

Answer 3

Я думаю, вы должны определить действие для вызываемой функции. При загрузке страницы или при нажатии, как показано ниже:

$(document).ready(function () {
    $('#sidebar').on('click', function () {
          $(this).toggleClass('show');
    });
});