js实现高度自动的过渡动画怎么做,html过渡动画
墨初 知识笔记 104阅读
<!DOCTYPE html><html langen> <head> <meta charsetUTF-8> <meta nameviewport contentwidthdevice-width, initial-scale1.0> <meta http-equivX-UA-Compatible contentieedge> <title>Document</title> </head> <style> ul{ width: 200px; height: 0; /* 动画类型 */ transition: transform; /* 动画时长 */ transition-duration: 0.5s; /* 动画延迟 */ transition-delay: 0.2s; /* 动画控制属性 */ transition-property: height; overflow: hidden; } li{ list-style-type: none; width: 200px; height: 40px; line-height: 40px; color: #fff; font-size: 14px; text-align: center; background: #1061f8; } </style> <body> <p idbtn>toggle菜单</p> <ul idul> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> </ul> </body> <script> var btn document.getElementById(btn); var menu document.getElementById(ul); btn.onmouseenter function(){ // 获取菜单高度(执行JS时浏览器来不及渲染所有不会闪烁) menu.style.height auto; var heigt menu.getBoundingClientRect().height; menu.style.height 0; //offsetHeight会强制浏览器重绘(先渲染0px然后再渲染heigt如果不加则直接会渲染height不会渲染0px) menu.offsetHeight menu.style.height heigt px; } btn.onmouseleave function(){ menu.style.height 0; } </script></html>标签：