了解如何在应用的两个视图之间添加动画效果。
您经常需要在应用中的视图之间移动用户,无论是从列表到详情视图,还是显示边栏导航。这些视图之间的动画可以吸引用户,并为您的项目增加更多活力。
- 使用转换在视图之间移动;避免使用
left
、top
或任何其他会触发布局的属性。 - 确保使用的所有动画简洁明快,并且设置较短的持续时间。
- 考虑随着屏幕尺寸的增大,您的动画和布局会如何变化;适合小屏幕的动画用在桌面环境时可能看起来很奇怪。
这些视图转换的外观和行为取决于您要处理的视图类型。例如,为视图之上的模态叠加层设置动画效果,应该不同于在列表视图和详情视图之间转换,
使用翻译在视图之间切换
为方便起见,我们假定有两个视图:一个列表视图和一个详情视图。当用户点按列表视图中的列表项时,详情视图会滑入,而列表视图也会滑出。
为了实现这种效果,您需要一个容纳这两个视图的容器,并为容器设置 overflow: hidden
。这样一来,这两个视图就可以并排显示在容器内,不显示任何水平滚动条,而且每个视图也可以根据需要在容器内侧向滑动。
容器的 CSS 为:
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
容器的位置被设置为 relative
。这意味着,其中的每个视图可以绝对定位在左上角,然后通过变形移动。与使用 left
属性相比,此方法更有利于性能(因为该属性会触发布局和绘制),并且通常更易于合理化。
.view {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* let the browser know we plan to animate
each view in and out */
will-change: transform;
}
为 transform
属性添加 transition
可以实现很好的滑动效果。为实现不错的感觉,它使用了自定义的 cubic-bezier
曲线,我们在自定义加/减速指南中讨论了该曲线。
.view {
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
屏幕之外的视图应平移到右侧,因此在这种情况下需要移动详情视图:
.details-view {
transform: translateX(100%);
}
现在,需要少量 JavaScript 来处理类。这将切换视图上的相应类。
var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');
/**
* Toggles the class on the container so that
* we choose the correct view.
*/
function onViewChange(evt) {
container.classList.toggle('view-change');
}
// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', onViewChange, false);
}
// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);
最后,我们为这些类添加 CSS 声明。
.view-change .list-view {
transform: translateX(-100%);
}
.view-change .details-view {
transform: translateX(0);
}
您可以扩展此范围以涵盖多个视图,并且基本概念应该保持不变;每个不可见的视图都应在屏幕之外并按需显示,而当前屏幕上的视图应移开。
除了在视图之间切换之外,此技术还可以应用于其他滑入元素,如边栏导航元素。唯一真正的区别是您无需移动其他视图。
确保动画在较大屏幕上正常显示
对于较大的屏幕,应始终保留列表视图而不是将其移除,并从右侧滑动详情视图。这与处理导航视图几乎完全相同。