如何以显示结尾为不透明度 0 制作过渡效果：无？

Question

使用此代码，我正在模拟sidemenu，因此如果我单击包含overlay 的button，则将打开包含sidemenu 并且sidemenu 向右移动。如果我clickoutside，overlay 消失，菜单返回到初始位置。

.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;
}

.css

.showmenu {
  left: 0px;
}

.hidemenu {
  left: -500px;
}

此代码有效，但我认为我使事情复杂化了很多，也许我不需要将代码放在我的 .ts 中，但我的想法是，我只想知道我是否可以解决相同的效果有来自css 和/或html 的angular 代码

我希望当我单击button 以显示overlay 然后从sidemenu 向右过渡，当我单击覆盖显示后，它将显示从我的过渡sidemenu 到它的起点。

关于问题标题，我之所以这么说是因为如果我把一个display: none开头的.menuside_container，sidemenu的过渡不会显示出来

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

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

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

注意：

我基本上想做 gif 中显示的内容，但以更优化的方式。我使用setTimeouts 来实现它。但正如问题所说，我对如何将具有不透明度效果的元素从 1 转换为 0 但最后具有属性 display: none 很感兴趣。为什么？我想完全隐藏一个元素，但是使用opacity: 0 它仍然会占据space，即使它不可见

Answer 1

您可以使用非常简单的基于 html 和 CSS 的动画菜单。看看这个来自你的stackblitz。

例如：

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>

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

如果您希望display: none 阻止点击该元素，您可以使用pointer-events: none;。

您还可以有一个类来显示菜单并假设正常状态是隐藏的。

所以我的建议是

.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 中的函数只需设置showMenu 属性

 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 4

您可以通过使用JavascriptElement.animate() 或使用CSS 创建相同的动画来做到这一点（您需要两个帮助类，例如关闭，打开）。使用translateX() 而不是left 制作动画。

只有在动画结束后，您才需要使用animationend 事件才能应用display: none。

此效果不需要某些元素。例如，不需要.menuside_container，只使用了一个简单的帮助类。

请检查以下示例的逻辑：

const menuside = document.querySelector('.menuside');

menuside.addEventListener('animationend', () => {
  menuside.style.display = 'none';

});

menuside.addEventListener('click', () => {
  menuside.animate([
    // keyframes
    {
      transform: 'translateX(0)',
      opacity: '1'
    },
    {
      transform: 'translateX(-304px)',
      opacity: '0'
    }
  ], {
    // timing options
    duration: 1000,
    fill: 'forwards',
    direction: 'normal',
    iterations: 1
  });
  menuside.classList.add('closed');
});

document.querySelector('button').addEventListener('click', () => {
  if (menuside.classList.contains('closed')) {
    menuside.style.display = 'block';
    menuside.animate([
      // keyframes
      {
        transform: 'translateX(0)',
        opacity: '1'
      },
      {
        transform: 'translateX(-304px)',
        opacity: '0'
      }
    ], {
      // timing options
      duration: 1000,
      fill: 'forwards',
      direction: 'reverse',
      iterations: 1
    });
    menuside.classList.remove('closed');
  }
});

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

body {
  width: 100%;
  height: 100%;
  background-color: red;
}

button {
  position: fixed;
  top: 3rem;
  right: 1rem;
}

<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>
<button>show menu</button>

Answer 5

这很好用，我得到了与你的 gif 中显示的相同的东西，但没有使用 setTimeout，但正如你所看到的，尽管在 @keyframes 中使用了等于 none 的显示属性，但它不会显示任何更改，因为显示属性是不可动画 .要查看动画属性的完整列表，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

var overlay=document.getElementById('overlay');
    var menuside=document.getElementById('menuside');
    
    function show_menu(){
overlay.style.display="block";
    overlay.style.animation="show_overlay 0.6s 1";
    overlay.style.animationFillMode="forwards";
    menuside.style.animation="show_menu_pane 0.6s 1";
    menuside.style.animationFillMode="forwards";

}
    
    function hide_menu(){
    menuside.style.animation="hide_menu_pane 0.6s 1";
    menuside.style.animationFillMode="forwards";
    overlay.style.animation="hide_overlay 0.6s 0.3s 1";
    overlay.style.animationFillMode="forwards";
    
    }

*{
            
            margin: 0px;
            padding: 0px;
            font-family: 'Arial';
        }
        body{
            background-color: blue;
        }
    .menuside {
  position: absolute;
  top: 0px;
  width: 304px;
  transition: all 0.3s linear;
  background-color: #eaeaea;
  height: 100%;
  z-index: 900;
  transform: translateX(-304px);
 
}
.menuside li{
    padding: 10px;
}
.menuside li a{
  text-decoration: none;
    font-size: 18px;
    color:#707070;
    transition: 0.4s;
}
.menuside li a:hover{
    margin-left: 20px;
}
.menuside_container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  
  z-index:-1;
 
}
.overlay{
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:8;
    transition:0.6s;
    opacity: 1;
}

@keyframes hide_overlay
{
    from
    {
    opacity: 1; 
    display: block;
    z-index: 8;
    }
    to
    {
opacity: 0;
display: none;
z-index: 0;
    }
}

@keyframes show_overlay
{
    from
    {
    opacity: 0; 
    z-index: 0;
    }
    to
    {
opacity: 1;
    z-index: 8;
    }
}
@keyframes show_menu_pane
{
    from
    {
    transform: translateX(-304px);
    }
    to
    {
    transform: translateX(0px);
    }
}
@keyframes hide_menu_pane
{
    from
    {
    transform: translateX(0px);
    }
    to
    {
    transform: translateX(-304px);
    }
}


button{
    position: absolute;
    z-index: 1;
    padding: 10px;
    border:1px solid black;
    font-size: 18px;
    outline: none;
}

<div class="menuside_container" >
  <div class="overlay" id="overlay" onclick="hide_menu()"></div>
  <div class="menuside" id="menuside">
    
    <ul>
    <li>
    <a href="#/" class="menu-item d-block" style="height:46px">
      option 1
    </a>
    </li>
    <li>
    <a href="#/" class="menu-item d-block" style="height:46px">
      option 2
    </a>
    </li>
    <li>
    <a href="#/" class="menu-item d-block" style="height:46px">
      option 3
    </a>
    </li>
    <hr class="m-0">
    </ul>
  </div>
<button onclick="show_menu()">Show Menu</button>
</div>

2。 display:none 的另一种替代方法是将宽度和高度设为零，结果将与 gif 相同，但不透明度转换不起作用。

var overlay=document.getElementById('overlay');
    var menuside=document.getElementById('menuside');
    
    function show_menu(){
overlay.style.display="block";
    overlay.style.animation="show_overlay 0s 1";    
    overlay.style.animationFillMode="forwards";
    menuside.style.animation="show_menu_pane 0.6s 1";
    menuside.style.animationFillMode="forwards";
    
}

    function hide_menu(){
    menuside.style.animation="hide_menu_pane 0.6s 1";
    menuside.style.animationFillMode="forwards";
    overlay.style.animation="hide_overlay 0s 0.6s 1";
    overlay.style.animationFillMode="forwards";

    }
    

    *{
            
            margin: 0px;
            padding: 0px;
            font-family: 'Arial';
        }
        body{
            background-color: blue;
        }
    .menuside {
  position: absolute;
  top: 0px;
  width: 304px;
  transition: all 0.3s linear;
  background-color: #eaeaea;
  height: 100%;
  z-index: 900;
  transform: translateX(-304px);
 
}
.menuside li{
    padding: 10px;
}
.menuside li a{
    font-size: 18px;
    color:#707070;
    text-decoration: none;
    transition: 0.4s;
}
.menuside li a:hover{
    margin-left: 20px;
}
.menuside_container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 304px;
  height: 100%;
 
}
.overlay
{
    display:none;
    position:absolute;
    width:100vw;
    height:100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:14;
    transition:0.6s;
}

@keyframes hide_overlay{
    from{
width:100vw;
height:100vh;
    
}
    to{
width:0vw;
height:0vh; 
    }
}
@keyframes show_overlay{
    from{
width:0vw;
height:0vh;
}
    to{
width:100vw;
height:100vh;   
    }
}
@keyframes show_menu_pane
{
    from
    {
    transform: translateX(-304px);
    }
    to
    {
    transform: translateX(0px);
    }
}
@keyframes hide_menu_pane
{
    from
    {
    transform: translateX(0px);
    }
    to
    {
    transform: translateX(-304px);
    }
}


button{
    position: absolute;
    z-index: 13;
    padding: 10px;
    border:1px solid black;
    font-size: 18px;
    outline: none;
}

  <div class="overlay" id="overlay" onclick="hide_menu()"></div>  

<div class="menuside_container" >
  
  <div class="menuside" id="menuside">
    <ul>
    <li>
    <a href="#/" class="menu-item d-block" style="height:46px">
      option 1
    </a>
    </li>
    <li>
    <a href="#/" class="menu-item d-block" style="height:46px">
      option 2
    </a>
    </li>
    <li>
    <a href="#/" class="menu-item d-block" style="height:46px">
      option 3
    </a>
    </li>
    <hr class="m-0">
    </ul>
  </div>
</div>
<button onclick="show_menu()" id="button">Show Menu</button>

Answer 6

如果你不仅想不显示，还想从 DOM 中移除，你可以使用 Angular 动画来实现。在你的组件中定义

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  animations: [
    trigger("menuOpenClose", [
      transition(":enter", [
        style({ left: "-300px"}), //state initial
        animate("100ms", style({ left: 0 }))  //animate to a final state
        ]),
      transition(":leave", [animate("100ms", style({ left: "-300px" }))])
    ])
  ]
})

所以你只需声明一个变量

open=false;

还有一个类似的html

<div @menuOpenClose class="menuside" *ngIf="open">
  <button (click)="open=false">close</button>
</div>
<button (click)="open=true">open</button>

见very ugly stackblitz

更新改进“菜单”

你声明了两个辅助变量

submenuOpen=false;
openFinished=false;

还有一个类似的.class

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

查看 .html - 您使用 open=true 和 (@menuOpenClose.done) 的地方-

<!--
  if you want close when click in any place of "#menu" add
     (click)="open=false"
  if you want close ONLY y you click in "menu" (but not if click in a button inside "menu") e.g. you has a "submenu"
     (click)="$event.target==menu && open=false"
-->

<div #menu @menuOpenClose (@menuOpenClose.done)="openFinished=!openFinished" 
         class="menuside" *ngIf="open"
         (click)="$event.target==menu && open=false">
    <button (click)="open=false">close</button>
    <div>
        <button (click)="submenuOpen=!submenuOpen" >menu</button>
    </div>
    <div *ngIf="submenuOpen" (click)="open=false">
        <hr />
        <button (click)="doIt('I\'m menu 1')">menu-1</button>
        <button (click)="doIt('I\'m menu 2')">menu-2</button>
    </div>
</div>
<button (click)="open=true">open</button>
<div class="fade" *ngIf="openFinished" (click)="open=false"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius

Answer 7

display:none 不受转换速度的影响，因此不能由纯 CSS 完成。

你可以：

1. 使用解决方法。 （例如，您可以使用visibility:hidden; 或width:0;height:0;overflow:hidden;margin:0;，它们会受到转换延迟的影响。

或

1. 您可以使用 javascript，就像您在示例中所做的那样，

或

1. Angular 本身实际上具有内置动画支持，您可以将其设置为在*ngIf 触发时触发。例如，这里：angular 2 ngIf and CSS transition/animation

Answer 8

从此 repo 获取代码。你想要的东西是在响应模式下实现的。

代码：https://github.com/muhammadawaisshaikh/gamelist-ui-test/tree/master/header
预览直播：https://muhammadawaisshaikh.github.io/gamelist-ui-test/header/

Answer 9

实际上你将不得不使用 translateX 来实现流畅的 60fps 动画。

您可以在本文 (https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108) 中阅读其背后的理论，或者直接获取文章末尾的代码