Question

我试图像模态一样制作全屏菜单。除了fadeOut动画，一切都很好。有人可以解释我的脚本/代码有什么问题吗？我希望在单击按钮时使此内容淡入，但在再次单击时淡出。我的脚本设置＆＃34;显示＆＃34;的值。但在动画中只有淡入效果才能正常工作。在反向淡出时立即生效（没有0.5秒的动画持续时间）。按钮的z-index = 101，menu-content = 100，所以按钮始终保持在同一个位置。

由于

＆＃13;

function myMenu() {
  var x = document.getElementById("menu-content");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
  if (x.style.animation === "fadeIn 0.5s ease-in-out") {
    x.style.animation = "fadeOut 0.5s ease-in-out";
  } else {
    x.style.animation = "fadeIn 0.5s ease-in-out";
  }
}

＆＃13;

#menu-content {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(-25deg, #c0a0ae, #6f448a);
  z-index: 100;
  top: 0;
  left: 0;
  animation: fadeOut 0.5s ease-in-out;
}

.menu-content-properties {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  background: #000000;
  opacity: 0.5;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

＆＃13;

<button id="menu-button" style="z-index: 101; position: absolute; top: 0; 
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content"></div>

<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>

＆＃13;

Answer 1

好的，所以有几个问题。

首先，在您的HTML中，有两个具有相同ID（//Act var result = await _controller.ValidateSiteCodes(siteCodeInputsViewModel);）的元素会导致一些问题，因此请删除其中一个。

其次，当您在menu-content函数中设置display: none时，它会立即被隐藏，这就是为什么不显示动画的原因。

您有几个选择：

将该代码置于myMenu内，以便在动画结束前不设置为setTimeout，或者
请勿使用display: none

就我个人而言，我认为你最好不要使用display: none，否则每当你改变动画的持续时间时你都需要修改你的javascript。

我设法让它工作而不需要显示none，并且使用非常好的CSS转换

＆＃13;

display: none

＆＃13;

function myMenu() {
  var x = document.getElementById("menu-content");

  if (x.classList.contains("open")) {
    x.classList.remove("open");
  } else {
    x.classList.add("open");
  }

}

＆＃13;

#menu-content {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(-25deg, #c0a0ae, #6f448a);
  z-index: 100;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

#menu-content.open {
  opacity: 1;
}

.menu-content-properties {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  background: #000000;
  opacity: 0.5;
}

＆＃13;

一个按钮的多个操作

1 个答案: