菜单过渡动画效果

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>二级菜单</title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
               list-style-type: none;
           }

           a,
           img {
               border: 0;
               text-decoration: none;
           }

           body {
               font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
           }
       </style>

               // 选择到类为 menuSpan 的对象
               var menus = document.querySelectorAll(".menuSpan");
               var divs = document.querySelectorAll("#my_menu div");

               for(var i = 0; i < menus.length; i++) {
                   menus[i].onclick = function() {
                       var curMenu = this;

                       //获取当前父节点
                       var parent = curMenu.parentNode;
                       var begin = parent.offsetHeight; // 225
                       //切换父节点样式

                       toggleClass(parent, "collapsed");
                       var end = parent.offsetHeight; //25
                       // 将样式变为初始高度保证执行从开始到结束
                       parent.style.height = begin + "px";
                       move(parent, "height", end, 10, function() {
                           parent.style.height = "";
                       });
                       //其他节点均关闭
                       closeOther(parent);
                       /*
                       我们在操作动画时，要知道元素的开始状态，结束状态，我们从开始过渡到目标。
                       如果我们一开始就知道动画完成后的状态，如果我们仅仅使用目标去进行过渡得不到正确的结果
                       需要设置样式将我们现在的状态更改为初始值状态（使用内联样式style.xxx）
                       然后在动画结束后，我们清除该样式，因为我们的类中已经添加。该值已经失去意义。
                       *
                       * */
                   };
               }

</head>

<body>

       <div id="my_menu" class="sdmenu">
           <div>
               <span class="menuSpan">在线工具</span>
               <a href="#">图像优化</a>
               <a href="#">收藏夹图标生成器</a>
               <a href="#">邮件</a>
               <a href="#">htaccess密码</a>
               <a href="#">梯度图像</a>
               <a href="#">按钮生成器</a>
           </div>
           <div class="collapsed">
               <span class="menuSpan">支持我们</span>
               <a href="#">推荐我们</a>
               <a href="#">链接我们</a>
               <a href="#">网络资源</a>
           </div>
           <div class="collapsed">
               <span class="menuSpan">合作伙伴</span>
               <a href="#">JavaScript工具包</a>
               <a href="#">CSS驱动</a>
               <a href="#">CodingForums</a>
               <a href="#">CSS例子</a>
           </div>
           <div class="collapsed">
               <span class="menuSpan">测试电流</span>
               <a href="#">Current or not</a>
               <a href="#">Current or not</a>
               <a href="#">Current or not</a>
               <a href="#">Current or not</a>
           </div>
       </div>
   </body>

</html>

来源：oschina

链接：https://my.oschina.net/u/3994350/blog/3234732

标签

Javascript工具包