如何将过渡效果转换为不透明度0并以显示：无结尾？

Question

使用此代码，我模拟了一个< code >侧菜单，因此，如果我单击< code >按钮，包含< code >侧菜单的< code >覆盖图会打开，并且< code >侧菜单会向右移动。如果我< code >单击 外部，则< code >覆盖图消失，菜单返回其初始位置。

. html

<div class="menuside_container" (click)="fn_hideSideMenu()" [ngClass]="showSideMenuContainer?showSideMenuContainer:''">
  <div class="menuside" [ngClass]="{showmenu:showMenu, hidemenu:!showMenu}">
    

    <a  class="menu-item d-block" style="height:46px">
      option 1
    </a>
    <a  class="menu-item d-block" style="height:46px">
      option 2
    </a>
    <a  class="menu-item d-block" style="height:46px">
      option 3
    </a>
    <hr class="m-0">
  </div>

</div>
<button (click)="fn_showSideMenu()">show menu</button>

. ts

showMenu: boolean = false;
showSideMenuContainer: any = "d-none";

 fn_showSideMenu() {
  setTimeout(() => {
    this.showMenu = true;
  });
  this.showSideMenuContainer = "d-block";
}
fn_hideSideMenu() {
  this.showMenu = false;
  setTimeout(() => {
    this.showSideMenuContainer = "d-none";
  }, 400);
}


.menuside {
  position: absolute;
  top: 0px;
  width: 304px;
  transition: all 0.3s linear;
  background-color: #eaeaea;
  height: 100%;
}

.menuside_container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

。钢性铸铁

.showmenu {
  left: 0px;
}

.hidemenu {
  left: -500px;
}

这段代码可以工作，但我认为我让事情变得复杂了很多，也许我不需要在我的. ts中添加代码，但我的想法是，我只是想知道我是否可以解决与css和/或html中的代码相同的效果

我希望当我点击按钮以显示覆盖，然后从siemenu向右转换时，当我点击覆盖显示后，它将显示从我的siemenu到其起点的转换。

关于问题标题，我把它是因为如果我把一个显示：无在开头到。menuside_container，siemenu的转换不显示

谢谢。我只是在寻找解决问题的最佳解决方案

这是我的实时代码（请参见app/app.component.html/ts/css）：

https://stackblitz.com/edit/angular-ng-bootstrap-wa3xto?file=app/app.component.html

注意:

我基本上想做gif中显示的事情，但以一种更优化的方式。我使用< code>setTimeouts来实现它。但正如问题所说，我感兴趣的是如何使一个元素的不透明度效果从1过渡到0，但在最后有属性< code>display: none。为什么？我想完全隐藏一个元素，但是使用< code>opacity: 0时，即使它不可见，它仍然会占用< code >空间

Answer 1

如果要显示：无 为了防止单击元素，您可以使用指针事件：无;。

您还可以使用单个类来显示菜单，并假定正常状态是隐藏的。

所以我的建议是

.menuside {
  [...]
  transition: transform 0.3s linear;
  [...]
  transform: translateX(-500px)
}

.menuside_container {
  [...]
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s linear;
  opacity: 0;
}

.menuside.showmenu {
  transform: translateX(0)
}

.menuside_container.showmenu {
  pointer-events: auto;
  opacity: 1;
}

. ts中的函数只需要设置Show Menu属性

 fn_showSideMenu() {
   this.showMenu = true;
 }
 fn_hideSideMenu() {
   this.showMenu = false;
 }

HTML 是：

<div class="menuside_container" (click)="fn_hideSideMenu()" [ngClass]="{showmenu:showMenu}">
  <div class="menuside" [ngClass]="{showmenu:showMenu}">
    <a  class="menu-item d-block" style="height:46px">
      option 1
    </a>
    <a  class="menu-item d-block" style="height:46px">
      option 2
    </a>
    <a  class="menu-item d-block" style="height:46px">
      option 3
    </a>
    <hr class="m-0">
  </div>

</div>
<button (click)="fn_showSideMenu()">show menu</button>

你可以看看我在Stackblitz做的叉子

https://stackblitz.com/edit/angular-ng-bootstrap-rcwejo?file=app/app.component.css

Answer 2

你实际上正在实现你想做的事情。如果您检查控制台，您将看到.menuside_container在动画运行之前具有 display：none，并在菜单关闭后恢复到此状态。这是因为您正在对其应用 d-none 类，该类应用以下声明：display： none！important;

您还可以执行其他操作来改进代码。正如其他人指出的那样，Angular确实有自己的动画系统，你可能想研究一下。此外，您可以使用 translateX（） 函数代替使用 left 属性执行动画，该函数被认为性能更高。这是通过进行以下更改来实现的：

.showmenu {
  /* left: 0px; */
  transform: translateX(0)
}

.hidemenu {
  /* left: -500px; */
  transform: translateX(-500px)
}

Answer 3

你可以使用非常简单的基于html和CSS的动画菜单。看看这个从你那里分出来的stackblitz。

例如：

js prettyprint-override">function closeMenu() {
  document.querySelector(".menuside_container").classList.add("hidemenu");
  document.querySelector(".menuside_container").classList.remove("showmenu");
}

function showMenu() {
  document.querySelector(".menuside_container").classList.remove("hidemenu");
  document.querySelector(".menuside_container").classList.add("showmenu");
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background: blue;
}

@keyframes menuOpen {
  from {
    opacity: 0.5;
    transform: translateX(-500px);
    display: none;
  }
  to {
    opacity: 1;
    transform: translatX(0);
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@keyframes menuClose {
  from {
    opacity: 1;
    transform: translateX(0);
    display: block;
  }
  to {
    opacity: 0.5;
    transform: translateX(-500px);
    display: none;
    z-index: -1;
    background-color: transparent;
  }
}

.menuside {
  position: absolute;
  top: 0px;
  width: 304px;
  height: 100%;
  background-color: #eaeaea;
}

.menuside_container {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.showmenu,
.hidemenu {
  animation-duration: 0.4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.showmenu {
  animation-name: menuOpen;
}

.hidemenu {
  animation-name: menuClose;
}

.d-block {
  display: block;
}

<div class="menuside_container hidemenu" onclick="closeMenu()">
  <div class="menuside">
    <a class="menu-item d-block" style="height:46px">
      option 1
    </a>
    <a class="menu-item d-block" style="height:46px">
      option 2
    </a>
    <a class="menu-item d-block" style="height:46px">
      option 3
    </a>
    <hr class="m-0">
  </div>

</div>
<button onclick="showMenu()">show menu</button>