css过渡 取消过渡_正确获得屏幕过渡

css过渡 取消过渡

演示地址

Moving from one screen to another is the perfect occasion to provide a sense of structure and dimension to the user, to better understand the information architecture of our product. It’s not just a cosmetic matter; sure, a smooth transition is, of course, more pleasing to the eye than a sudden jump. But the way the screens move in or out of the viewport is fundamental to subconsciously explain how our app is structured; it’s a way to add a third dimension to an otherwise flat space.

米一个屏幕到另一个oving是绝好的机会， 提供结构和尺寸给用户的感觉 ，以便更好地了解我们的产品的信息架构 。 这不仅是表面上的事情； 当然，平稳过渡当然比突然跳动更令人赏心悦目。 但是屏幕移入或移出视口的方法是下意识地解释我们应用程序的结构的基础 ; 这是在原本平坦的空间中添加第三维的方法。

Transitions can be of many kinds and of course, there is always room to invent a new one. They usually are NOT interchangeable, it’s not really a matter of preference, each transition conveys a message and describes a position in our product’s map; a slide-in suggests a different relationship between screens than a fade-in or a pop.

过渡可以有很多种，当然，总有创造新的空间。 它们通常是不可互换的，这并不是真正的优先选择， 每个转换都传达信息并描述我们产品地图中的位置 ； 滑入提示屏幕之间的关系不同于淡入或弹出 。

Here we’ll explore the most common and basic (and functional ones) and when these should be used.

在这里，我们将探讨最常见和最基本的(以及功能性的)以及何时应使用它们。

推 (Push)

Push transitions are used between screens that are hierarchically at the same level and share the same plane. It’s like they are all on the same sheet and a camera moves from one to the next. The push can be from left and right or top and bottom.

推送过渡用于在同一级别上分层且共享同一平面的屏幕之间。 就像它们都在同一张纸上一样，照相机从一张移到另一张。 可以从左，右或顶部和底部进行推动。

常见用途 (Common uses)

• Moving between tabs
  在标签之间移动
• Quickly access to a main functionality (e.g. access to camera)
  快速访问主要功能(例如访问摄像头)
• Content slideshow
  内容幻灯片

滑入/滑出 (Slide-in/out)

This might look similar to the push transition, but it’s not. The new screen slides in but doesn’t push the old one out. The idea is that the incoming screen is positioned on a layer above the previous one.

这可能看起来类似于推送过渡，但事实并非如此。 新屏幕滑入，但不会将旧屏幕推出 。 想法是，传入屏幕位于上一个屏幕上方的一层上。

This works also the other way around, with a slide-out. The current screen slides out and reveals the screen resting underneath.

反之亦然， 滑出也可以 。 当前屏幕滑出， 露出下面的屏幕 。

The new screen is getting the attention of the user for her/him to perform an action, but there isn’t a real change of location. The new screen is usually temporary, the user wants to go back to the previous one once the task has been completed.

新屏幕正在吸引用户的注意，以便他/他执行操作，但是位置并没有真正的改变 。 新屏幕通常是临时的，一旦任务完成， 用户希望返回上一个屏幕。

常见用途 (Common uses)

• Modals
  模态
• Dialogs
  对话方块
• Menus
  选单

流行音乐 (Pop)

The destination screen scale-up and fade-in to cover the initial screen. There is a movement on the Z-axis, a screen that was behind moves forward and vice-versa. In this case, the 2 screens don’t share the same plane, they live in 2 different locations and exchange places, the one in the front goes to the background and vice-versa. They might be equally important, or the first one could be the container for the second.

目标屏幕放大并淡入以覆盖初始屏幕。 Z轴上有一个运动 ，后面的屏幕向前移动，反之亦然。 在这种情况下， 两个屏幕不共享同一平面 ，它们位于两个不同的位置并可以交换位置 ，前面的一个进入背景，反之亦然。 它们可能同等重要，或者第一个可能是第二个的容器。

常见用途 (Common uses)

• Launching an app
  启动一个应用
• Swapping between 2 main functionalities or modes
  在2种主要功能或模式之间切换

淡入 (Fade-in)

The destination screen fades-in in front of the original screen. This transition can have multiple purposes: it can be used to simply have a smoother jump to a location that is hierarchically higher or lower, or even at the same level, but not related (for content or functionality) to the origin in a way that a slide-in would make sense; it can be used to display a screen that is a consequence of an action performed on the original screen. In other words, a screen that is originating from the main screen on which the trigger action has been performed.

目标屏幕在原始屏幕之前淡入。 这种过渡可以有多种用途：可以简单地平滑地跳转到层次结构更高或更低，甚至在同一级别但不与原点相关 (就内容或功能而言)的位置，滑入是有意义的； 它可用于显示屏幕，该屏幕是在原始屏幕上执行的操作的结果。 换句话说，是源自已在其上执行触发动作的主屏幕的屏幕。

常见用途 (Common uses)

• Moving between screens from a bottom navigation
  从底部导航在屏幕之间移动
• Modals (e.g. confirmation to delete an item, logout,…)
  方式(例如，确认删除项目，注销等)

扩大 (Expand)

This transition is usually used to move to the detail page of an item that is already displayed in a collapsed/preview version on the original screen. The origin is usually a node in a branch of the information architecture, the destination is a leaf page, normally we move 1 level down.

此过渡通常用于移至已在原始屏幕上以折叠/预览版本显示的项目的详细信息页面 。 起点通常是信息体系结构分支中的一个节点 ， 终点是叶子页 ，通常我们向下移动1级。

常见用途 (Common uses)

• Going to the detail view of an item from a list
  从列表转到项目的详细信息视图
• Expand a card
  展开卡

持久性元素 (Persistent elements)

This is a particular iteration on the push. In some cases, when we have a flow made of several steps, like a registration process, for example, it can be beneficial to guide the user from one screen to the other with elements that persistently stay within the viewport and move from one step to the following. Such elements can change their position and size or even morph in shape, but they don’t follow their originating screen out of the viewport. They are animated in contrast with the transition and drive the attention of the user to the new screen, helping to maintain the context. It’s a “visual link” that guides through the process.

这是推送中的特定迭代。 在某些情况下，当我们有一个由多个步骤组成的流程(例如，注册过程)时，使用永久停留在视口中并从一个步骤移至另一个步骤的元素将用户从一个屏幕引导到另一个屏幕可能是有益的。下列。 这样的元素可以更改其位置和大小，甚至可以改变形状，但是它们不会跟随其原始屏幕离开视口。 与过渡相反，它们具有生气勃勃的动画效果，并引起用户对新屏幕的关注，从而有助于保持上下文 。 这是指导整个过程的“可视链接”。

It doesn’t have to be the same component going through each step of the flow, it can work as a relay race:

在流程的每个步骤中不必使用相同的组件，它可以作为接力赛工作：

• from step 1 to step 2 element A is persistent
  从步骤1到步骤2，元素A是持久性的
• step 2 brings in element B
  步骤2引入元素B
• from step 2 to 3 element B is persistent
  从步骤2到步骤3，元素B是持久性的
• step 3 brings in element C
  步骤3引入元素C
• from step 3 to 4 element C is persistent
  从第3步到第4步，元素C是持久的
• and so on.
  等等。

常见用途 (Common uses)

• Registration flows
  注册流程
• Check-out flows
  结帐流程

Transitions not only help to create a more polished and pleasant product, but communicate the information architecture, give context and help to navigate.

过渡不仅有助于创建更精美和令人愉悦的产品，而且可以传达信息体系结构，提供上下文并帮助导航。

But not all transitions are good in all situations; to a certain extent, they are able to mimic a physical environment, or at least suggest the idea of one, and the more coherent this environment is, the easier it is for users to move around without getting lost.

但是，并非所有的过渡都在所有情况下都是好的。 在一定程度上，他们能够模仿一个物理环境 ，或者至少提出一个环境的想法，并且这种环境越连贯，用户越容易走动而不会迷路 。

翻译自: https://uxdesign.cc/get-screen-transitions-right-e8c4c57b9576

css过渡 取消过渡