'Is it possible to transition an elment smoothly after toggling the display:none property through javascript?

Problem 1

I am creating a dashboard with some menu items. I have a dashBoard menu that is clicked to display the rest of the menu items. I am looping through each menu item and toggling a class menu with display: none; in javascript. The problem is the transition of the menus. I wanted them to transition smoothly and tried using transition property, but it didn't work. I tried using opacity, and it did work, but the problem with opacity is that the menus stay where they are; we are making them invisible temporarily or just blending them with the background color to give an effect of invisibility. But upon hovering the mouse over where menus would generally be the pointer of the mouse changes(an indication menus are there). I want the menus to be hidden just like display: none makes them but want to transition them smoothly.

Problem 2

Right now when you click the dashBoard the menus show and when you click the dashboard to hide them again, the menus leave a "dot" behind. I have set the padding: 5px so that that dot is more clearly visible. The dot is occurring due to the border on the menuwrapper. Is there a way I can keep the border, without getting that dot on the screen? 

let dashBoard = document.querySelector(".dashBoard");
let menuItems = document.querySelectorAll(".menu");
let menuWrapper = document.querySelector(".menuwrapper");
dashBoard.addEventListener("click", menuVisible);

function menuVisible() {
  menuWrapper.style.border = "2px solid red";
  menuItems.forEach(item => {
    item.classList.toggle("menu");
  });
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

#dashboard {
  width: 150px;
  border: 2px solid blue;
}

.dashItem,
.dashmain {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  gap: 20px;
  line-height: 1.5rem;
  /*   margin: 5px 25px; */
  color: #03588c;
  cursor: pointer;
}

.fas,
.far {
  place-self: center;
}

.menu {
  display: none;
}

.menuwrapper {
  /*   border: 2px solid gray; */
  border-radius: 5px;
  background-color: #010440;
}

.fa-columns {
  color: #03588c;
}

#main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 3%;
  align-items: center;
  padding: 20px;
}

#navbar {
  order: 3;
  place-self: center end;
  padding: 3px;
  /*   border: 2px solid red; */
  border-radius: 5px;
  cursor: pointer;
}

input {
  height: 30px;
  appearance: none;
  border: 2px solid gray;
  border-radius: 5px;
}

#searchbar {
  display: inherit;
  grid-row: 2;
  grid-column: span 2;
}

.dashBoard {
  position: relative;
}

.menuwrapper {
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 50px;
}

.dashItem:hover {
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<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">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <title>Dashboard</title>
</head>

<body>
  <div id="main">
    <div>
      <ul id="dashboard">
        <li class="dashmain dashBoard"><i class="fas fa-columns fa-1x"></i>Dashboard</li>
        <div class="menuwrapper">
          <li class="dashItem menu home"><i class="fas fa-home"></i>Home</li>
          <li class="dashItem menu profile"><i class="fas fa-users"></i>Profile</li>
          <li class="dashItem menu message"><i class="fas fa-inbox"></i>Messages</li>
          <li class="dashItem menu history"><i class="fas fa-history"></i>History</li>
          <li class="dashItem menu task"><i class="fas fa-tasks"></i>Tasks</li>
          <li class="dashItem menu community"><i class="fas fa-church"></i>Communities</li>
          <li class="dashItem menu setting"><i class="fas fa-cog"></i>Setting</li>
          <li class="dashItem menu support"><i class="far fa-question-circle"></i>Support</li>
          <li class="dashItem menu privacy"><i class="fas fa-user-secret"></i>Privacy</li>
        </div>
      </ul>
    </div>
    <div id="navbar">
      <i class="fas fa-user"></i>
    </div>
    <div id="searchbar">
      <input type="text" placeholder="Search"></input>
    </div>
  </div>

</body>

</html>
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions