如何让你的组件活起来——transition

怎样让个人博客、项目页面高级起来：增加动态效果！

而想要精确控制组件的动态表现，就需要使用常用的css样式：transition。

一、基本用法

动态变化效果，首先得知道从什么状态或样式变成什么状态或样式。

例如，我想实现一个【左 | 中 | 右】三个组件，当鼠标移动到中间的组件上时，其宽度从窄变宽，推动左右两个组件向两侧滑动。我们首先需要明确：

1. 变化的属性是 width
2. 变化的时机是鼠标悬停（hover）
3. 变化的耗时定为1秒

那么可以通过伪类写出变化前后的css：

.center-container {
    width: 10rem;
    transition: width 1s;
}

.center-container:hover {
    width: 40rem;
}

可见，当前DOM元素在发生属性变化时，transition 规定的属性有相应的动态变化。

注意：一般应加在变化前的状态上，transition 本身不是继承属性，其子组件不会继承其transition 的效果。简而言之，transition 一般应加在目标元素变化前的状态中。

二、复杂用法

① 同时控制多属性

transition 可以作用于目标元素的多个属性（用逗号隔开），其中每个属性最多可填写4个参数