在视图之间添加动画

了解如何在应用的两个视图之间添加动画效果。

Paul Lewis

您经常需要在应用中的视图之间移动用户,无论是从列表到详情视图,还是显示边栏导航。这些视图之间的动画可以吸引用户,并为您的项目增加更多活力。

  • 使用转换在视图之间移动;避免使用 lefttop 或任何其他会触发布局的属性。
  • 确保使用的所有动画简洁明快,并且设置较短的持续时间。
  • 考虑随着屏幕尺寸的增大,您的动画和布局会如何变化;适合小屏幕的动画用在桌面环境时可能看起来很奇怪。

这些视图转换的外观和行为取决于您要处理的视图类型。例如,为视图之上的模态叠加层设置动画效果,应该不同于在列表视图和详情视图之间转换,

使用翻译在视图之间切换

在两个视图之间转换。

为方便起见,我们假定有两个视图:一个列表视图和一个详情视图。当用户点按列表视图中的列表项时,详情视图会滑入,而列表视图也会滑出。

视图层次结构。

为了实现这种效果,您需要一个容纳这两个视图的容器,并为容器设置 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);
}

试试看

您可以扩展此范围以涵盖多个视图,并且基本概念应该保持不变;每个不可见的视图都应在屏幕之外并按需显示,而当前屏幕上的视图应移开。

除了在视图之间切换之外,此技术还可以应用于其他滑入元素,如边栏导航元素。唯一真正的区别是您无需移动其他视图。

确保动画在较大屏幕上正常显示

大屏幕上的视图层次结构。

对于较大的屏幕,应始终保留列表视图而不是将其移除,并从右侧滑动详情视图。这与处理导航视图几乎完全相同。