• js实现高度自动的过渡动画

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.   <title>Documenttitle>
    9. head>
    10. <style>
    11.   * {
    12.     padding: 0;
    13.     margin: 0;
    14.   }
    15.  
    16.   ul {
    17.     width: 200px;
    18.     height: 0;
    19.     /* 动画类型 */
    20.     transition: transform;
    21.     /* 动画时长 */
    22.     transition-duration: .8s;
    23.     /* 动画延迟 */
    24.     transition-delay: .2s;
    25.     /* 动画控制属性 */
    26.     transition-property: height;
    27.     overflow: hidden;
    28.     cursor: pointer;
    29.     border-radius: 2px;
    30.     box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
    31.   }
    32.  
    33.   li {
    34.     list-style-type: none;
    35.     width: 200px;
    36.     height: 40px;
    37.     line-height: 40px;
    38.     color: #fff;
    39.     font-size: 14px;
    40.     text-align: center;
    41.     background: #1061f8;
    42.   }
    43.  
    44.   body {
    45.     display: flex;
    46.     flex-direction: column;
    47.     align-items: center;
    48.   }
    49.  
    50.   #btn {
    51.     width: 200px;
    52.     height: 40px;
    53.     line-height: 40px;
    54.     margin-top: 100px;
    55.     text-align: center;
    56.     background: #dfdfdf;
    57.     border-radius: 2px;
    58.     cursor: pointer;
    59.   }
    60. style>
    61.  
    62. <body>
    63.   <p id="btn">toggle菜单p>
    64.   <ul id="ul">
    65.     <li>菜单一li>
    66.     <li>菜单一li>
    67.     <li>菜单一li>
    68.     <li>菜单一li>
    69.     <li>菜单一li>
    70.     <li>菜单一li>
    71.     <li>菜单一li>
    72.     <li>菜单一li>
    73.     <li>菜单一li>
    74.   ul>
    75. body>
    76. <script>
    77.   var btn = document.getElementById('btn');
    78.   var menu = document.getElementById('ul');
    79.   var heigt = 0
    80.   btn.onmouseenter = function () {
    81.     // 获取菜单高度(执行JS时浏览器来不及渲染，所有不会闪烁)
    82.     if (!heigt) {
    83.       menu.style.height = 'auto';
    84.       heigt = menu.getBoundingClientRect().height;
    85.     }
    86.     menu.style.height = 0;
    87.     //offsetHeight会强制浏览器重绘(先渲染0px，然后再渲染heigt，如果不加则直接会渲染height，不会渲染0px)
    88.     menu.offsetHeight
    89.     menu.style.height = heigt + 'px';
    90.   }
    91.   btn.onmouseleave = function () {
    92.     menu.style.height = 0;
    93.   }
    94.  
    95.   menu.onmouseenter = function () {
    96.     menu.style.height = heigt + 'px';
    97.   }
    98.   menu.onmouseleave = function () {
    99.     menu.style.height = 0;
    100.   }
    101. script>
    102.  
    103. html>

  • 相关阅读:
    背包问题及其拓展
    flyway适配高斯数据库
    霸榜双11！科技创新助力九牧卫浴赢战全渠道
    HashMap 、LinkedHashMap 和TreeMap
    Linux操作系统——面试题-(腾讯,百度,美团,滴滴)
    一文读懂 Linux 网络 IO 模型
    SPA项目开发之首页导航+左侧菜单
    iOS开发Swift-5-自动布局AutoLayout-摇骰子App
    Netty 学习：通信协议和编解码
    STM32F103C8 串口的使用
  • 原文地址：https://blog.csdn.net/Mr_linjw/article/details/134020110