補充知識：
①display:none;與translation過渡效果沖突枢冤，即使用display:none|block;操作盒子時無法實現(xiàn)動畫效果征冷。
②雖然定位能夠使元素脫離文檔流，但是當父元素設置overflow:hidden時坯屿，該元素如果定位的位置超出父元素的可視區(qū)域之外油湖，將不會顯示。即元素設置overflow:hidden领跛；其可視區(qū)域就是其寬高所構成的區(qū)域乏德，超出該區(qū)域無法可視。
③設置動畫盒子時吠昭，由于動畫盒子采用絕對定位的方式喊括，所以要善于利用left,top,bottom,right四個屬性，left,top,bottom,right四個屬性的設置相當于在設置構造動畫盒子的起始點矢棚。
一瘾晃、方案一：（具有通用性）
①動畫盒子使用絕對定位的形式在適當位置勾畫出符合要求的盒子。
②設置動畫盒子：（比如）
height:0px;
overflow:hidden;/*隱藏盒子中的內(nèi)容*/
transition:all .2s linear|ease-in|ease-out|ease-in-out .1s;
③hover事件觸發(fā)動畫盒子:（比如）
height:還原高度幻妓；
transform:translateY(60px);
opacity:1;/*可以不添加；也可能需要設置z-index劫拢。*/
二肉津、方案二：（動畫盒子定位在觸發(fā)事件盒子的同一區(qū)域）
①動畫盒子使用絕對定位的形式在適當位置勾畫出符合要求的盒子。
②使用z-index隱藏動畫盒子舱沧；
必須要求動畫盒子的父級盒子（所有父級盒子）不能使用overflow:hidden妹沙。
③設置動畫盒子：（比如）
transition:all .2s linear|ease-in|ease-out|ease-in-out .1s;
z-index:設置合適的值（應為負值）;
④觸發(fā)事件盒子：
該盒子的父級盒子或者為包含動畫盒子的盒子設置合適的z-index值。
④hover事件觸發(fā)動畫盒子:（比如）
transform:translateY(60px);（設置合適的動畫效果）
三熟吏、方案三：（動畫盒子定位在觸發(fā)事件盒子的外部區(qū)域）
①動畫盒子使用絕對定位的形式在適當位置勾畫出符合要求的盒子距糖。
②觸發(fā)事件盒子:
overflow:hidden;/*隱藏區(qū)域之外的元素*/
③設置動畫盒子：（比如）
transition:all .2s linear|ease-in|ease-out|ease-in-out .1s;
④hover事件觸發(fā)動畫盒子:（比如）
transform:translateY(60px);（設置合適的動畫效果）
