实现二级菜单的滑动出现与消失(解决dispaly与transition冲突问题)

解决transition与display冲突的问题

思路:

因为transition和display有冲突,只要dispaly,transition就不起作用,在开始css,变display为block,然后setTimeout设置为1秒后,在改变其他的css,如opcity或right等可以过渡的css
在最后用监听一次过渡结束事件one('transitionend',()=>{...}));

代码如下:
实现二级菜单的滑动出现与消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transitionTest2_submeau</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 400px;
            margin: 100px auto 0;
        }

        .nav > li {
            display: inline-block;
            position: relative;

        }

        .nav > li::after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 5px;
            background-color: orange;
            top: 100%;
            left: 0;
            transition: all .5s;
        }

        .nav > li > a {
            display: inline-block;
            padding: 10px;
            border: 1px solid red;
        }

        .submeau {
            position: absolute;
            /*!*right: 100%;*!,加到html属性里*/
            top: 120%;
            white-space: nowrap;
            border: 1px solid blue;
            padding: 20px;
            transition: all .5s;
            /*margin-right: 100%;*/
            /*opacity: 0;*/
            /*加到html属性里*/
        }

        .nav>li:hover::after{
            width: 100%;
        }

        /*这段用jQuery写在html的属性上,方便进行修改*/
        /*.nav>li:hover .submeau{*/
            /*opacity: 1;*/
            /*!*margin-left: 0;*!*/
            /*right: 0;*/
        /*}*/
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</head>
<body>

<ul class="nav">
    <li>
        <a href="#">
            作品
        </a>
        <ul class="submeau" >
            <li>js</li>
            <li>CSS</li>
            <li>啊可接受的管理会计ad佛罗伦萨放得开是龙卷风的恐惧感</li>
        </ul>
    </li>
    <li>
        <a href="#">
            博客
        </a>
        <ul class="submeau" >
            <li>245345345</li>
            <li>346</li>
            <li>啊实34534543打实大师的</li>
        </ul>
    </li>
    <li>
        <a href="#">
            我的联系电话
        </a>
    </li>
</ul>
<!--style="right: 100%;opacity: 0;display:none"-->
</body>
<script>
// subMeauCss初始化,将subMeau的Css改为,style="right: 100%;opacity: 0;display:none"
//也可以直接在html里面改,但是需要手动,
subMeauInit();
function subMeauInit() {
    var $subMeauArr  = $('.submeau');
    console.log($subMeauArr);
    for (let i = 0; i < $subMeauArr.length; i++) {
        $($subMeauArr[i]).css({
            right:'100%',
            opacity:'0',
            display:'none'
        })
    }
}

let $liArr = $('.nav>li');
// console.log($liArr);
for (let i = 0; i < $liArr.length; i++) {
    $liArr.eq(i).on('mouseenter',function (x) {//$liArr.eq(i)===$($liArr[i])
        $(x.currentTarget).children('ul.submeau').css({
            display:'block',
        })
        setTimeout(function () {
            $(x.currentTarget).children('ul.submeau').css({
                opacity:'1',
                right:'0'
            })
        },1)//当mouseenter事件后,先把submeau立即变成block,然后一毫秒后执行改变css,不然的话,display:'block',会影响opacity:'1',只要display:'block',opacity就立马变成'1'了,不会执行过渡
    })

    $liArr.eq(i).on('mouseleave',function (x) {
        $(x.currentTarget).children('ul.submeau').css({
            opacity:'0',
            right:'100%'
        })

        // 鼠标leave的时候监听过渡结束触发事件,且只触发一次,当鼠标leave,且过渡事件结束,那么将display变成none.
        $liArr.eq(i).children('ul.submeau').one('transitionend',function (x) {
           $(x.currentTarget).css({
               display:'none',
           })
        })
    })
}

</script>
</html>

实现二级菜单的滑动出现与消失(解决dispaly与transition冲突问题)

解决transition与display冲突的问题

风彻

引用和评论

用一个例子理解JS函数的底层处理机制

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具