使用 Material Design 实现过渡效果
Material Design 是一种流行的设计语言，Google 于 2014 年推出，具有平面设计和实体设计结合的特点。Material Design 呈现出明亮、启发、直观、统一和有意义的设计风格。在前端开发中，为了提升用户体验，我们可以使用 Material Design 实现过渡效果来增加页面的动态感。
过渡效果是指页面元素在状态转换时呈现出一种平滑的变化效果，让用户感知页面变化的流畅性和整体性。在 Material Design 中，过渡效果被定义为 Material Motion。Material Motion 由以下四个部分组成：
- Material 组件动画 - 其中组件移动、缩放和褪色等效果均属于该范畴。
- 过渡背景 - 状态变化期间出现的背景减弱和模糊等效果。
- 共享元素过渡 - 针对两个元素之间的状态变化，通常用于页面之间的切换。
- 光流效果 - 在滑动、拖动或滚动过程中出现的视觉效果，使用户知道正在进行的操作。
为了实现 Material Motion，我们可以使用 CSS、JavaScript 和一些库。
一、使用 CSS 过渡
CSS 过渡是最基本的方式之一，可以直接在 CSS 样式里为元素添加过渡效果。CSS 的 transition 和 animation 属性可以用于实现针对属性值的平滑变化。
假设我们有一个按钮元素：
<button class="button">Click me</button>
我们想为按钮添加颜色过渡效果，当鼠标悬停在按钮上时颜色会从蓝色渐变为绿色。
我们可以为该元素添加以下 CSS 样式：
-- -------------------- ---- ------- ------- - ----------------- ----- ------ ------ -------- ----- ---- ------- ----- ----------- ---------------- ---- ----- - ------------- - ----------------- ------ -
以上代码中，我们先为按钮添加了基本样式，包括背景颜色、文字色、内边距和边框等。然后使用 transition 属性为按钮的背景色添加了过渡效果。最后，当用户将鼠标悬停在按钮上时，样式将发生变化，触发过渡效果。
CSS 过渡可以通过为元素添加多个属性来创建更复杂的动画效果。例如，我们可以组合 transform、opacity、blur 和 scale 属性等，创造出各种不同的过渡效果。
二、使用 JavaScript 实现过渡
另一种实现 Material Motion 的方式是使用 JavaScript。通常，我们使用 JavaScript 来控制元素属性的变化和动态计算值。使用 JavaScript 实现过渡主要有两种方式：使用基本的 setTimeout 和 setInterval 函数和使用 JavaScript 库。
setTimeout 和 setInterval 函数可以用于设置定时器和间隔器，根据设定的时间间隔执行一些指定的任务。在过渡效果中，我们可以使用定时器和间隔器来连续改变元素的属性值，从而实现平滑的过渡效果。
假设我们有一个 DIV 元素：
<div class="box"></div>
我们希望为该元素添加位移过渡效果，即向下移动 40px。
我们可以为该元素添加以下 JavaScript 代码：
-- -------------------- ---- -------
----- --- - -------------------------------
--- ------ - --
-------- --------- -
------ -- --
------------------- - --------------------------
-- ------- - --- -
------------------- ----
-
-
----------以上代码中，我们首先获取了该元素的引用，然后创建了一个 offset 变量来跟踪元素的偏移量。接着，我们定义了一个 moveBox 函数，该函数每次调用时将 offset 增加 4，并将 translate 样式应用于元素，从而使元素位移 4 像素。然后我们使用 setTimeout 函数，每隔 10 毫秒重复调用 moveBox 函数，以实现元素平滑的位移过渡效果。
除了使用 setTimeout 和 setInterval 函数之外，还可以使用许多现有的 JavaScript 库，以更高效和方便的方式实现过渡效果。其中一些库包括 jQuery、CSS3 Animations & Transitions 和 Velocity.js 等等。
三、使用 Material Design 库
当我们希望快速实现 Material Design 过渡效果时，可以考虑使用已有的 Material Design 库。Material Design Lite（MDL）、Materialize 和 Material-UI 等是一些广泛使用的库，它们提供了许多易于使用的组件和过渡效果，可以让我们快速应用 Material Design 程序中的动态效果。
假设我们想为选项卡组件添加过渡效果。
我们可以使用 Material Design Lite（MDL）库来实现：
-- -------------------- ---- ------- ---- -------------------------- -- -------------- -------------------- -------------- ----- -- -------------- ------------------------- ----- -- -------------- ------------------------- ----- ------ ---- ---------------------- ---------- ------------ ------- -- --- ----- ---------- ------ ---- ----------------------- ------------ ------- -- --- ------ ---------- ------ ---- ----------------------- ------------ ------- -- --- ----- ---------- ------
以上代码中，我们首先定义了三个选项卡，每个选项卡都包含一个链接和一个关联的面板。然后我们向每个选项卡链接和面板添加了对应的 class，以使其与 Material Design Lite 库一起工作。
最后，我们可以使用以下 JavaScript 代码为选项卡组件添加过渡效果：
-- -------------------- ---- ------- ----- ---- - --------------------------------------------- ------------------------------ - -- - ------------------- ----- ------- - ---------------------------- ----- --------- - --------------------------------------------------- ----- ----------- - ----------------------------------------------------- ----- --------- - --------- ----- ----------- - --------------------------------- ---------------------------------------- ------------------------------------- ------------------------------------------ --------------------------------------- ---
以上代码中，我们简单地添加了一个 click 事件侦听器，以便在用户点击选项卡时触发。然后，我们获取当前选项卡和面板的引用，并将它们从活动状态中删除。最后，我们使用classList API 来添加新选项卡和面板的活动类，以触发过渡效果。
结论
使用 Material Design 实现过渡效果可以提升应用程序的视觉吸引力和动态感。我们可以使用 CSS、JavaScript 和现有的库来实现不同的效果。无论采用哪种实现方式，都应该确保效果是平滑、明显的，并且与应用程序自身的主题和设计相一致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6731ade10bc820c58239c369