transition 过渡效果

到 B 站观看视频

UI 设计，也就是用户界面的设计，不仅仅是个静态的美，因为界面是动的。所以好的用户体验很大程度来自于动态效果。相关的技巧不少，今天介绍最重要的一个：transition 。

案例展示

先来看看过渡效果能做出什么效果。

• 第一个，教学案例的导航栏和侧边栏（ http://meteor.haoduoshipin.com ）。

• 第二个，这个按钮效果中 也用到了 transiton 。

• 第三个，不依赖于 JS 的菜单 。

基本语法

代码要写成这样

.example {
    transition: 过渡属性 持续时间 效果函数 过渡延时;
}

例如

.example {
    transition: background-color 2s ease 1s;
}

其他都好理解，具体到“效果函数”，除了 ease 之外还有哪些呢？完整的列表在 w3c 官网上有（懒人方法：除非特殊场合，一般用 ease 或者不用，出来的效果都挺好的）。

触发方式

过渡是从一种状态变到另一种状态，那么什么时候变，或者说为什么要变呢？总要有个触发事件吧。触发方式中最常见的就是鼠标滑过：

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

上面的例子相信是足够易懂的。

复杂一点的例子

在 codepen 上演示一下吧，详细过程见视频。

See the Pen WQBPvq by Peter Wang (@happypeter) on CodePen.

上面的例子中可以抽出的最重要的知识点：

第一，作为触发动作的鼠标滑过事件，鼠标滑过的元素可以不是状态变化的那个元素，可以是它的父元素。

.box:hover .ball {
...
}

就像上面代码中，状态要变得元素是 div.ball ，但是鼠标事件是在它的父元素身上触发的。

第二， transition 效果可以应用的 CSS 属性有很多种

.box:hover .ball {
  top: 90px;
  left: 20px;
  background-color: lightseagreen;
  border-radius: 50%;
}

上面代码中，一旦鼠标滑过 div.box 那么 div.ball 的 top ， left ，background-color 和 border-radius 都会变成新的值。那要同时跟踪多个属性变化，transition 语句就要写成下面这样：

transition: all 1s;

用 all 来跟踪所有。那么还有哪些 CSS 属性能够使用过渡效果呢？很多很多 。

兼容性问题

在 border-radius 那一集 已经提过了，这里情况是完全一样的。