CODEWITHSUNDEEP
javascripthtmlcss
Tane
Tane

Reputation: 491

Add animation when opening & closing Div element

I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.

I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.

I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.

var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");

button.onclick = function(){

  if(content.className == "open"){
    content.className = "";
    content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
    {duration: 1500, fill:'forwards'})
  } else{
    content.className = "open";
  }
};
#navBtn

#mobileLinks {
  display: none
}

#mobileLinks.open {
  display: flex;
}

Upvotes: 1

Views: 17097

Answers (3)

GuCier
GuCier

Reputation: 7425

You can handle the styles entirely in CSS, and only toggle a class with Js.

With CSS & Js

const menu = document.getElementById("menu")

function toggleMenu() {
  menu.classList.toggle("isOpen");
}
#menu {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#menu.isOpen {
  opacity: 1;
}
<a onClick="toggleMenu()">menu</a>

<nav id="menu">
  <a>link</a>
  <a>link</a>
</nav>

Or with JS only

const menu = document.getElementById("menu")

menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"

function toggleMenu() {
  // Toggle between 0 and 1
  menu.style.opacity ^= 1;
}
<a onClick="toggleMenu()">menu</a>

<nav id="menu">
  <a>link</a>
  <a>link</a>
</nav>

Upvotes: 2

Rahul TP
Rahul TP

Reputation: 584

You can do it with JS. You can change the opacity of the element to hide it and along with css transition property to make fade effect

var container = document.getElementById("container")

function clicked() {
  if (container.style.opacity == 0) {
    container.style.opacity = 1
  }
  else {
    container.style.opacity = 0
  }
}
#container {
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
<div id="container">Some Text</div>
<a href="#" onclick="clicked()">Submit</a>

Upvotes: 0

Bharat Choudhary
Bharat Choudhary

Reputation: 186

You can achieve it using jquery effect

To show your element, use fadeIn() and to hide an element, you can use fadeOut()

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut();
    $("#div3").fadeToggle();

  });
});
</script>

Upvotes: 0

Related Questions