补充知识：

①display:none;与translation过渡效果冲突，即使用display:none|block;操作盒子时无法实现动画效果。

②虽然定位能够使元素脱离文档流，但是当父元素设置overflow:hidden时，该元素如果定位的位置超出父元素的可视区域之外，将不会显示。即元素设置overflow:hidden；其可视区域就是其宽高所构成的区域，超出该区域无法可视。

③设置动画盒子时，由于动画盒子采用绝对定位的方式，所以要善于利用left,top,bottom,right四个属性，left,top,bottom,right四个属性的设置相当于在设置构造动画盒子的起始点。

一、方案一：（具有通用性）

①动画盒子使用绝对定位的形式在适当位置勾画出符合要求的盒子。

②设置动画盒子：（比如）

height:0px;

overflow:hidden;/*隐藏盒子中的内容*/

transition:all .2s linear|ease-in|ease-out|ease-in-out .1s;

③hover事件触发动画盒子:（比如）

height:还原高度；

transform:translateY(60px);

opacity:1;/*可以不添加；也可能需要设置z-index。*/

二、方案二：（动画盒子定位在触发事件盒子的同一区域）

①动画盒子使用绝对定位的形式在适当位置勾画出符合要求的盒子。

②使用z-index隐藏动画盒子；

必须要求动画盒子的父级盒子（所有父级盒子）不能使用overflow:hidden。

③设置动画盒子：（比如）

transition:all .2s linear|ease-in|ease-out|ease-in-out .1s;

z-index:设置合适的值（应为负值）;

④触发事件盒子：

该盒子的父级盒子或者为包含动画盒子的盒子设置合适的z-index值。

④hover事件触发动画盒子:（比如）

transform:translateY(60px);（设置合适的动画效果）

三、方案三：（动画盒子定位在触发事件盒子的外部区域）

①动画盒子使用绝对定位的形式在适当位置勾画出符合要求的盒子。

②触发事件盒子:

overflow:hidden;/*隐藏区域之外的元素*/

③设置动画盒子：（比如）

transition:all .2s linear|ease-in|ease-out|ease-in-out .1s;

④hover事件触发动画盒子:（比如）

transform:translateY(60px);（设置合适的动画效果）