通过transition实现手风琴效果

手风琴是我们在前端设计中经常看到的一种图片的展示方式，其中最浅显易懂就是通过css的过渡属性（transition）来处理，首先我们脑补一下transition的用法，那就是经常被提到的动画三步骤，我们这里就以width为例来简单的介绍一下，我们实现一个100px宽度的div在鼠标悬停两秒之后开始发生过渡效果，并在两秒完成过渡，最后宽度过渡为500px

1、编写过渡前的样式；比如

div{
	width:100px;
}

2、编写过渡后的样式，并指明是由哪一个动作触发过渡，我们这里选择了hover；比如

div:hover{
	width:500px;
}

3、分析过渡，将过渡过程中发生的属性提取出来

transition-property：发生过渡的属性即哪一个属性在过渡中发生了变化，我们这里是width

transition-duration：过渡效果持续时间，我们这里是2s

transition-timing-function：动画过渡效果的时间曲线，我们这里是linear（匀速），还有其他取值，比如ease系列的，大家可以自行测试

transition-delay：过渡效果开始时间 ，我们这里是2s

加这四个属性添加到过渡前的样式中

div{
	width:100px;
	/*以下是过渡属性*/
	transition-property:width;
	transition-duration: 2s;
	transition-timing-function:linear ;
	transition-delay: 2s;
}

/*过渡之后的样式*/		
div:hover{
	width:500px;
}

简单来说就是，在过渡前的样式中告诉人家，哪个样式要在接下来的过渡中发生改变，过渡持续时间，过渡效果的时间曲线（说白了就是过渡的一个速度），过渡延迟时间，然后给一个触发过渡的选择器，比如hover，这样在元素hover之后就会出现过渡的效果，在对过渡有一个感性的认识之后，我们说一下手风琴的实现。

思路：

1、在ul里面水平排布（浮动）六个li，每个li里面放一个img，li的宽度为六分之一ul的width

2、过渡之后的效果，我们要换一个思路去思考，首先手风琴的效果我们拆解一下

（1）、鼠标悬停ul上面，所有li的宽度变窄

（2）、只有鼠标悬停的那一个li的宽度变长

3、最后就是transition:width 2s;这个是一个连写格式，表示两秒完成过渡，过渡属性为width