transition 过渡效果

到 B 站观看视频

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

案例展示

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

基本语法

代码要写成这样

.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.balltopleft background-colorborder-radius 都会变成新的值。那要同时跟踪多个属性变化,transition 语句就要写成下面这样:

transition: all 1s;

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

兼容性问题

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