切图仔梦想家 2017-05-20 10:24 采纳率: 100%
浏览 1889
已采纳

JS使用transition实现动画下拉框问题

事情是这样的,我想实现一个带动画效果的下拉框,当然用JQ的slideDown()实现起来很容易,但是我在学JS,所以想用JS来实现这个功能,但是总也实现不了,萌新的我很难受。求各位大腿帮忙指点一下。
图片说明

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>JavaScript下拉菜单</title>


</head>
<style>
    #ss {
        width: 100px;
        height: 100px;
        position: absolute;
        background: #F00;
        display: none;
    }
    /*    #aba:hover #ss{height: 300px;}*/

</style>

<body>
    onmouseout 和onmouseover 全部要小写
    <div id="aba" style="width:100px;height:100px;">123123123</div>
    <div id="ss">dddd</div>

    <script>
        var obj1 = document.getElementById("aba");
        var xk = document.getElementById("ss");

        obj1.onmouseover = function() {
            this.style.background = "#65CBFF";
            xk.style.display = "block";
            xk.style.transition = "all 2s";
            xk.style.WebkitTransition = "all 2s";
            xk.style.height = "300px";
            return true;
        }
        obj1.onmouseout = function() {
            this.style.backgroundColor = "#EEEEEE";
            xk.style.display = "none";
            xk.style.transition = "all 2s";
            xk.style.WebkitTransition = "all 2s";
            return true;
        }

    </script>
</body>

</html>
  • 写回答

3条回答 默认 最新

  • FEWY 博客专家认证 2017-05-22 05:46
    关注

    图片说明

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8">
    <head runat="server">
        <title>JavaScript下拉菜单</title>
    
    
    </head>
    <style>
        #ss {
            width: 100px;
            height: 0;
            position: absolute;
            background: #F00;
            height:300px;
            opacity:0;
        }
        /*    #aba:hover #ss{height: 300px;}*/
    
    </style>
    
    <body>
        onmouseout 和onmouseover 全部要小写
        <div id="aba" style="width:100px;height:100px;">123123123</div>
        <div id="ss">dddd</div>
    
        <script>
            var obj1 = document.getElementById("aba");
            var xk = document.getElementById("ss");
    
            obj1.onmouseover = function() {
                this.style.background = "#65CBFF";
                xk.style.opacity = "1";
                xk.style.transition = "all 2s";
                xk.style.WebkitTransition = "all 2s";
                xk.style.height = "300px";
                return true;
            }
            obj1.onmouseout = function() {
                this.style.backgroundColor = "#EEEEEE";
                xk.style.opacity = "0";
                xk.style.transition = "all 2s";
                xk.style.WebkitTransition = "all 2s";
                xk.style.height = "0";
                return true;
            }
    
        </script>
    </body>
    
    </html>
    
    

    不知道这是不是你要的效果。。。。
    说一句,display:none, 不支持过渡的

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!