补充知识：
①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);（设置合适的动画效果）
网友评论