显示父级时 CSS 翻译动画不起作用

Question

有this和this之类的类似问题，但不要针对这种情况。

目标是在显示其父级时通过 CSS 翻译将菜单滑动到屏幕上。但是，显示父级然后应用 CSS 类来触发翻译会立即发生，而不是随着时间的推移。实际上，没有动画。

JavaScript 可用于将子元素滑动到屏幕上，但目标是将尽可能多的动画逻辑保留在 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。 ;)

我为切换事件添加了一个按钮。如果您需要更多帮助，请告诉我！

enter link description here

$(".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>

将 display 更新为 none 以外的值将启动所有由 animation-name 属性应用于元素的动画，以及所有 应用于后代 且 display 不是 none 的动画。 ^ref

Answer 3

我认为您应该为调用的函数定义操作。当加载页面或点击如下：

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