时间戳

首页 > 解决方案 > 带有动画的屏幕叠加效果（从右到左显示）

css - 带有动画的屏幕叠加效果（从右到左显示）

问题描述

我有以下叠加层

<div id="overlay"></div>

#overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer; 
}

立即弹出。我想用动画效果让这个覆盖覆盖屏幕，在 1000 毫秒内从右到左出现。

我知道这对于 jQuery 是可行的，但我不想将它安装在我的 Angular 应用程序中。是否可以使用 typescript 和 CSS 来制作它？

谢谢。

标签： cssangular

解决方案

是的，您可以animation使用@keyframes：

#overlay {
  position: fixed; 
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
  
  animation: slide-in 1s both;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  
  to {
    transform: translateX(0);
  }
}
<div id="overlay"></div>

推荐阅读