为模态视图添加动画效果

模态视图会阻塞界面以显示重要消息。了解如何为应用中的模态视图添加动画效果。

Paul Lewis

为模态视图添加动画效果。
试一试

模态视图适用于重要消息,并且您有很好的理由来阻止界面。请谨慎使用它们,因为它们具有破坏性,如果过度使用,很容易破坏用户体验。但是,在某些情况下,它们是合适的视图,并且添加一些动画可以使其变得生动。

  • 应谨慎使用模态视图;如果不必要地打断用户的体验,他们会感到失望。
  • 为动画添加缩放可实现不错的“掉落”效果。
  • 当用户关闭模态视图时,应快速将其移除。不过,应缓慢一点地将模态视图显示在屏幕上,以免令用户感到惊讶。

模态叠加层应与视口对齐,因此请将其 position 设置为 fixed

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

它的初始 opacity 为 0,因此在视图中隐藏,但还需要将 pointer-events 设置为 none,以便传递点击和触摸操作。否则,它会阻止所有互动,使整个页面无响应。最后,由于它会为其 opacitytransform 添加动画效果,因此需要使用 will-change 将其标记为“正在更改”(另请参阅使用 will-change 属性)。

当该视图可见时,需要接受互动并将 opacity 设为 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

现在,每当需要模态视图时,您可以使用 JavaScript 切换“visible”类:

modal.classList.add('visible');

此时,模态视图显示时没有任何动画,因此您现在可以在其中添加动画(另请参阅自定义加/减速选项):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

向转换添加 scale 会使视图看起来略微掉落到屏幕上,这是一种不错的效果。默认过渡适用于变形和不透明度属性,具有自定义曲线和 0.1 秒的时长。

不过,持续时间非常短,但非常适合当用户关闭视图并希望返回您的应用时。其缺点是,当模态视图出现时,持续时间可能会过于激进。若要解决此问题,请替换 visible 类的过渡值:

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

现在模态视图用 0.3 秒时间进入屏幕,没那么激进,但会快速关闭,用户会喜欢。