Frage CSS-Transition danach anders?

[bln_design]

Hallo ich habe folgenden Code. Wenn ich das Menü öffne, steigen die Listenpunkte auf. Wenn ich das Menü schließe sollen die Listenpunkte einfach verschwinden. Wie bekomme ich das hin? LG

nav#menu ul {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    height: 0px;
    z-index: 999;
    background: #e6e6e6;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: 0.5s;
    transition-delay: 1s;
    box-shadow: 0px 2px 5px grey;
}

nav#menu ul.show {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    height: 300px;
    z-index: 999;
    background: #e6e6e6;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: 0.5s;
    box-shadow: 0px 2px 5px grey;
}

nav#menu ul li {
    visibility: hidden;
    float: left;
    list-style: none;
    margin-left: 0px;
    padding-left: 10%;
    margin-top: 10px;
    font-size: 20px;
    transform: translate(0px, 80px);
}

nav#menu ul li:nth-child(1) {
    transition: 0.5s;
    transition-delay: 0.5s;
}

nav#menu ul li:nth-child(2) {
    transition: 0.5s;
    transition-delay: 0.6s;
}

nav#menu ul li:nth-child(3) {
    transition: 0.5s;
    transition-delay: 0.7s;
}

nav#menu ul li:nth-child(4) {
    transition: 0.5s;
    transition-delay: 0.8s;
}

nav#menu ul li:nth-child(5) {
    transition: 0.5s;
    transition-delay: 0.9s;
}

nav#menu ul li.show {
    visibility: visible;
    float: left;
    list-style: none;
    margin-left: 0px;
    margin-top: 10px;
    font-size: 20px;
    transform: translate(0px, 0px);
}

<nav id="menu">
    <ul>
        <li><a href="index.html" class="active">Punkt 1</a></li>
        <li><a href="p2/">Punkt 2</a></li>
        <li><a href="p3/">Punkt 3</a></li>
        <li><a href="p4/">Punkt 4</a></li>
        <li><a href="p5/">Punkt5 </a></li>
    </ul>
</nav>

<script>
    $('.menu-icon img').on('click', function(e) {
        $('nav#menu ul').toggleClass("show");
        $('nav#menu ul li').toggleClass("show");
        e.preventDefault();
    });
</script>

 

[Aaron3219]

Wenn ich das Menü öffne, steigen die Listenpunkte auf. Wenn ich das Menü schließe sollen die Listenpunkte einfach verschwinden.

Ich sehe das Problem nicht. Das Menü verschwindet doch wieder und öffnet auch ganz normal mit Animation. Geht es dir darum, dass keine Schließanimation erfolgen soll?

 

[bln_design]

Ich sehe das Problem nicht. Das Menü verschwindet doch wieder und öffnet auch ganz normal mit Animation. Geht es dir darum, dass keine Schließanimation erfolgen soll?

Genau, es soll keine Schließanimation erfolgen.

 

[bln_design]

Vielen Dank, das funktioniert super! :)

Lässt sich relativ leicht machen, wenn Du die transition auch von der Klasse "show" abhängig machst:

        nav#menu ul {
            position: absolute;
            top: 60px;
            left: 0px;
            width: 100%;
            height: 0px;
            z-index: 999;
            background: #e6e6e6;
            display: flex;
            justify-content: center;
            flex-direction: column;
            /* transition: 0.5s; */
            /* transition-delay: 1s; */
            box-shadow: 0px 2px 5px grey;
        }

        nav#menu ul.show {
            position: absolute;
            top: 60px;
            left: 0px;
            width: 100%;
            height: 300px;
            z-index: 999;
            background: #e6e6e6;
            display: flex;
            justify-content: center;
            flex-direction: column;
            transition: 0.5s;
            box-shadow: 0px 2px 5px grey;
        }

        nav#menu ul li {
            visibility: hidden;
            float: left;
            list-style: none;
            margin-left: 0px;
            padding-left: 10%;
            margin-top: 10px;
            font-size: 20px;
            transform: translate(0px, 80px);
        }

        nav#menu ul li:nth-child(1) {
            transition: 0.5s;
            transition-delay: 0.5s;
        }

        nav#menu ul li:nth-child(2) {
            transition: 0.5s;
            transition-delay: 0.6s;
        }

        nav#menu ul li:nth-child(3) {
            transition: 0.5s;
            transition-delay: 0.7s;
        }

        nav#menu ul li:nth-child(4) {
            transition: 0.5s;
            transition-delay: 0.8s;
        }

        nav#menu ul li:nth-child(5) {
            transition: 0.5s;
            transition-delay: 0.9s;
        }

        nav#menu ul li:not(.show) {
            transition: none;
        }

        nav#menu ul li.show {
            visibility: visible;
            float: left;
            list-style: none;
            margin-left: 0px;
            margin-top: 10px;
            font-size: 20px;
            transform: translate(0px, 0px);
        }
    </style>