如何实现盒子以动画的形式自动弹出？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现盒子以动画的形式自动弹出？相关的知识，希望对你有一定的参考价值。
参考技术A 补充知识：①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);（设置合适的动画效果）
以上是关于如何实现盒子以动画的形式自动弹出？的主要内容，如果未能解决你的问题，请参考以下文章
web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变？
如何用jQuery实现点击按钮弹出一个盒子，除了这个盒子以外的其他部分颜色全变暗？
如何在androidstudio中以xml形式实现平移动画的效果