I have a drop down menu and everything is working correct, but the problem is when I want to close drop down menu it has about 1 second delay. I tried to make animation-delay and transition-delay to 0ms but nothing has changed. this is my code:
$(".bars-icon").on("click", function() { if ($(".menu").attr("data-menu") == "closed") { $(".menu").attr("data-menu", "opened"); $(".menu").css({ "right": "0px" }) } else { $(".menu").attr("data-menu", "closed"); $(".menu").css({ "right": "-300px" }) } }) $(".dropdown").on("click", e => { e.stopPropagation(); $(e.currentTarget).toggleClass('open'); }) @font-face { font-family: iransans; src: url(font/IRANSansWeb.ttf); } * { padding: 0; margin: 0; font-family: iransans; } html, body { height: 100%; } .menu { position: absolute; right: -300px; top: 58px; bottom: 0; background-color: rgb(13, 131, 209); min-width: 200px; transition: .5s; overflow-y: auto; padding-top: 5px; } .dropdown-item { color: white; text-shadow: 0px 0px 3px black; } .icon-item { margin-left: 8px; } .dropdown-item .fa-angle-down { float: left; } .dropdown, .dropdown-child { overflow: hidden; } .dropdown>div { max-height: 0px; transition: 2s; animation-delay: 0ms; transition-delay: 0ms; } .dropdown.open>div { max-height: 3000px; } .dropdown-item { display: block; padding: 10px 15px; } .dropdown-item:hover, .menu-item:hover { background-color: rgb(13, 131, 209); cursor: pointer; color: white; } .dropdown-content { background-color: rgb(78, 164, 221); } .header-navbar { position: fixed; top: 0; right: 0; width: 100%; line-height: 2rem; z-index: 1000; align-items: stretch; padding: 5px 15px; background-color: rgb(88, 182, 245); } main { margin-top: 5rem; } .bars-icon { font-size: 25px; color: white; outline-style: none; border: none; background-color: transparent; } .cont-logo { margin-right: 15px; }<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-dc2NSrAXbAkjrdm9IYrX10fQq9SDG6Vjz7nQVKdKcJl3pC+k37e7qJR5MVSCS+wR" crossorigin="anonymous"> </head> <body> <header class="header-navbar d-flex justify-content-between align-items-center"> <span class="side-header p-2 d-flex justify-content-between align-items-center"> <button class="bars-icon"><i class="fas fa-bars"></i></button> <span class="cont-logo"><img src="assets/images/logo.png" alt=""></span> </span> </header> <div class="menu" data-menu="closed"> <div class="menu-item"> <div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12"> <span class="dropdown-item"> <span class="icon-item"><i class="fas fa-user"></i></span> دسته بندی <span><i class="fas fa-angle-down"></i></span></span> <div class="dropdown-content"> <div> <span class="dropdown-item">دسته بندی</span> </div> <div> <span class="dropdown-item">دسته بندی</span> </div> <div> <span class="dropdown-item">دسته بندی</span> </div> <div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12"> <span class="dropdown-item"> <span class="icon-item"><i class="fab fa-telegram"></i></span> دسته بندی <span><i class="fas fa-angle-down"></i></span></span> <div class="dropdown-content"> <div> <span class="dropdown-item">دسته بندی</span> </div> <div> <span class="dropdown-item">دسته بندی</span> </div> <div> <span class="dropdown-item">دسته بندی</span> </div> <div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12"> <span class="dropdown-item"> <span class="icon-item"><i class="fas fa-user"></i></span> دسته بندی <span><i class="fas fa-angle-down"></i></span></span> <div class="dropdown-content"> <div> <span class="dropdown-item">دسته بندی</span> </div> <div> <span class="dropdown-item">دسته بندی</span> </div> <div> <span class="dropdown-item">دسته بندی</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="dropdown-item"> <span> <span class="icon-item"><i class="fab fa-telegram"></i></span> دسته بندی</span> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script> </body> </html>
max-height: 3000px;- when you remove the open class it needs to transition from 3000px to 0px. As your div isn't actually that height, you just don't see the first 2800px or so being transitioned. Link suggests a fix to add acubic-bezier(also needs the 2nd transition on your.open)