模态视图会阻塞界面以显示重要消息。了解如何为应用中的模态视图添加动画效果。
模态视图适用于重要消息,并且您有很好的理由来阻止界面。请谨慎使用它们,因为它们具有破坏性,如果过度使用,很容易破坏用户体验。但是,在某些情况下,它们是合适的视图,并且添加一些动画可以使其变得生动。
- 应谨慎使用模态视图;如果不必要地打断用户的体验,他们会感到失望。
- 为动画添加缩放可实现不错的“掉落”效果。
- 当用户关闭模态视图时,应快速将其移除。不过,应缓慢一点地将模态视图显示在屏幕上,以免令用户感到惊讶。
模态叠加层应与视口对齐,因此请将其 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
,以便传递点击和触摸操作。否则,它会阻止所有互动,使整个页面无响应。最后,由于它会为其 opacity
和 transform
添加动画效果,因此需要使用 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 秒时间进入屏幕,没那么激进,但会快速关闭,用户会喜欢。