1

I have a problem with a transition in JS. What i want is that once the div has opacity 0, js remove it automatically. The problem is that, i have to exit the div area, and then it removes it. That is because i have a mouseleave, but my question is. How can i delete that div without my mouse leaving the div area? Here's the CodePen link:

https://codepen.io/SpeedItaly/pen/PoGPGJZ

function style() {
  h4 = document.getElementById("hover_me");
  header = document.getElementById("header");
  logo = document.getElementById("hover_me1");
  logo.addEventListener("mouseover", (e) => {
    logo.style.transition = "1200ms ease-in-out opacity"
    logo.style.opacity = "0"
  });

  logo.addEventListener("mouseleave", (e) => {
    header.removeChild(logo);
  });

  menu = document.getElementById("menu");
  if (logo.style.opacity == 0) {
    menu.style.transition = "1200ms ease-in-out opacity"
    menu.style.opacity = "1"
  }

}

style();
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #f4f4f4;
  font-size: 16px;
  font-family: "Inter";
  font-weight: 400;
  color: #fff;
}

.header {
  width: 100%;
  height: 100vh;
  background: #222831;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222831;
  z-index: 99;
  cursor: default;
}

.logo>h4 {
  font-size: 70px;
}

.menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  opacity: 0;
}

.menu>li {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.menu>li>a {
  text-decoration: none;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 200;
  color: #fff;
}

.menu>li>a:hover {
  color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<body>
  <!-- Start Header -->
  <header class="header" id="header">

    <!-- Start Logo Container -->
    <div class="logo" id="hover_me1">
      <h4 class="text_white" id="hover_me">SpeedItaly</h4>
    </div>

    <!-- End Logo Container -->

    <!-- Start Menu -->
    <ul class="menu" id="menu">
      <li><a class="text_white" href="home.html">Home</a></li>
      <li><a class="text_white" href="#">About</a></li>
      <li><a class="text_white" href="#">Content</a></li>
    </ul>
    <!-- End Menu-->

  </header>
  <!-- End Header -->
yunzen
  • 32,854
  • 11
  • 73
  • 106
HolySpeeddo
  • 65
  • 6

4 Answers4

6

You can use the transitionend event instead.

function style() {
  h4 = document.getElementById("hover_me");
  header = document.getElementById("header");
  logo = document.getElementById("hover_me1");
  logo.addEventListener("mouseover", (e) => {
    logo.style.transition = "1200ms ease-in-out opacity"
    logo.style.opacity = "0"
  });

  logo.addEventListener("transitionend", (e) => {
    header.removeChild(logo);
  });

  menu = document.getElementById("menu");
  if (logo.style.opacity == 0) {
    menu.style.transition = "1200ms ease-in-out opacity"
    menu.style.opacity = "1"
  }

}

style();
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #f4f4f4;
  font-size: 16px;
  font-family: "Inter";
  font-weight: 400;
  color: #fff;
}

.header {
  width: 100%;
  height: 100vh;
  background: #222831;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222831;
  z-index: 99;
  cursor: default;
}

.logo>h4 {
  font-size: 70px;
}

.menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  opacity: 0;
}

.menu>li {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.menu>li>a {
  text-decoration: none;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 200;
  color: #fff;
}

.menu>li>a:hover {
  color: rgba(255, 255, 255, .35);
}
<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Start Header -->
  <header class="header" id="header">

    <!-- Start Logo Container -->
    <div class="logo" id="hover_me1">
      <h4 class="text_white" id="hover_me">SpeedItaly</h4>
    </div>

    <!-- End Logo Container -->

    <!-- Start Menu -->
    <ul class="menu" id="menu">
      <li><a class="text_white" href="home.html">Home</a></li>
      <li><a class="text_white" href="#">About</a></li>
      <li><a class="text_white" href="#">Content</a></li>
    </ul>
    <!-- End Menu-->

  </header>
  <!-- End Header -->
Mark Baijens
  • 13,028
  • 11
  • 47
  • 73
0

Just use a setTimeout. Specifically, setTimeout(function() {header.removeChild(logo)},1200).

function style() {
  h4 = document.getElementById("hover_me");
  header = document.getElementById("header");
  logo = document.getElementById("hover_me1");
  logo.addEventListener("mouseover", (e) => {
    logo.style.transition = "1200ms ease-in-out opacity"
    logo.style.opacity = "0"
    setTimeout(function() {header.removeChild(logo)},1200)
  });

  menu = document.getElementById("menu");
  if (logo.style.opacity == 0) {
    menu.style.transition = "1200ms ease-in-out opacity"
    menu.style.opacity = "1"
  }

}

style();
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #f4f4f4;
  font-size: 16px;
  font-family: "Inter";
  font-weight: 400;
  color: #fff;
}

.header {
  width: 100%;
  height: 100vh;
  background: #222831;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222831;
  z-index: 99;
  cursor: default;
}

.logo>h4 {
  font-size: 70px;
}

.menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  opacity: 0;
}

.menu>li {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.menu>li>a {
  text-decoration: none;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 200;
  color: #fff;
}

.menu>li>a:hover {
  color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<body>
  <!-- Start Header -->
  <header class="header" id="header">

    <!-- Start Logo Container -->
    <div class="logo" id="hover_me1">
      <h4 class="text_white" id="hover_me">SpeedItaly</h4>
    </div>

    <!-- End Logo Container -->

    <!-- Start Menu -->
    <ul class="menu" id="menu">
      <li><a class="text_white" href="home.html">Home</a></li>
      <li><a class="text_white" href="#">About</a></li>
      <li><a class="text_white" href="#">Content</a></li>
    </ul>
    <!-- End Menu-->

  </header>
  <!-- End Header -->
bowlowl
  • 417
  • 2
  • 7
0

You can listen for the transitionend CSS event, and remove the node in it.

Also, it is very recommended to declare your variables and move CSS declarations into the CSS code, where possible.

function style() {
  const h4 = document.getElementById("hover_me");
  const header = document.getElementById("header");
  const logo = document.getElementById("hover_me1");
  const menu = document.getElementById("menu")
  logo.addEventListener("mouseover", (e) => {
    logo.classList.add("hidden")
    logo.addEventListener("transitionend", () => {
      logo.remove()
      menu.classList.remove("hidden")
    })
  });


}

style();
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #f4f4f4;
  font-size: 16px;
  font-family: "Inter";
  font-weight: 400;
  color: #fff;
}

.header {
  width: 100%;
  height: 100vh;
  background: #222831;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222831;
  z-index: 99;
  cursor: default;
  transition: 1200ms ease-in-out opacity;
}

.logo>h4 {
  font-size: 70px;
}

.menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  transition: 1200ms ease-in-out opacity;
}

.menu>li {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.menu>li>a {
  text-decoration: none;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 200;
  color: #fff;
}

.menu>li>a:hover {
  color: rgba(255, 255, 255, .35);
}

.hidden{
  opacity: 0;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<body>
  <!-- Start Header -->
  <header class="header" id="header">

    <!-- Start Logo Container -->
    <div class="logo" id="hover_me1">
      <h4 class="text_white" id="hover_me">SpeedItaly</h4>
    </div>

    <!-- End Logo Container -->

    <!-- Start Menu -->
    <ul class="menu hidden" id="menu">
      <li><a class="text_white" href="home.html">Home</a></li>
      <li><a class="text_white" href="#">About</a></li>
      <li><a class="text_white" href="#">Content</a></li>
    </ul>
    <!-- End Menu-->

  </header>
  <!-- End Header -->
FZs
  • 16,581
  • 13
  • 41
  • 50
0

You can use the following code to receive your current browser's Transition Events:

    const getTransitionEvents = () => {
    let t,
        el = document.createElement("fakeelement");

    let transitions = {
        transition: {
            Start: "transitionstart",
            Run: "transitionrun",
            Cancel: "transitioncancel",
            End: "transitionend"
        },
        OTransition: {
            Start: "oTransitionStart",
            Run: "oTransitionRun",
            Cancel: "oTransitionCancel",
            End: "oTransitionEnd"
        },
        MozTransition: {
            Start: "transitionstart",
            Run: "transitionrun",
            Cancel: "transitioncancel",
            End: "transitionend"
        },
        WebkitTransition: {
            Start: "webkitTransitionStart",
            Run: "webkitTransitionRun",
            Cancel: "webkitTransitionCancel",
            End: "webkitTransitionEnd"
        }
    };

    for (t in transitions) {
        if (el.style[t] !== undefined) {
            return transitions[t];
        }
    }
};

After that you can just bind the return of this function to a variable

const transEvt = getTransitionEvents();

and bind eventListeners to it

document.addEventListener(transEvt.End, (evt) => {
    // do some cool stuff when the Transition ends
});

I use this myself, in a #just-for-fun #work-in-progress pen called Simple Image Loop without duplicating slides where I rearrange the slides after the transform transition has ended.

René A. Dippe
  • 26
  • 5