Animate a tag when display after clicking

Question

How to give an animation to the div tag when it is displayed (click on button)?

function toggle_div_fun(id) { 
  var divelement = document.getElementById(id); 
  if (divelement.style.display == 'flex') divelement.style.display = 'none'; 
  else divelement.style.display = 'flex';
}

<button class="eco-btn" onclick="toggle_div_fun('sectiontohide');">Click here</button>
<div id="sectiontohide">This is the div to hide</div>

Does this answer your question? [Trigger CSS Animations in JavaScript](https://stackoverflow.com/questions/44846614/trigger-css-animations-in-javascript) — disinfor, Nov 07 '22 at 22:33

vnetkc · Answer 1 · 2022-11-07T22:54:13.590

// I'm going to use jQuery since it has the toggle animation for this
function toggle_div_fun(id, usejQuery = true) {
  if (usejQuery) {
    const divelement = $(id);
    // 200 is ms it takes to complete animation
    divelement.toggle(200)
    return;
  }
  document.getElementById("sectiontohideNojQuery").classList.toggle("hideDiv");

}

.showDiv {
  opacity: 1;
  animation: showMe 1s forwards;
}

.hideDiv {
  animation: hideMe 1s forwards;
}

@keyframes showMe {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hideMe {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="eco-btn" onclick="toggle_div_fun('#sectiontohide');">Click here</button>
<div id="sectiontohide">This is the div to hide</div>
<button class="eco-btn" onclick="toggle_div_fun('#sectiontohideNojQuery', false);">Click here No JQuery</button>
<div class="showDiv" id="sectiontohideNojQuery">This is the div to hide not using jQuery</div>

np @meysamcode, I made an adjustment to the snippet for native JS/CSS methods. If these work, remember to mark the answer as accepted — vnetkc, Nov 07 '22 at 22:57

score 0 · Answer 2 · answered Nov 07 '22 at 23:20

You can give this a style and then transition to the new style when you add a class. Here for example I transition the height and font size with css.

function toggle_div_fun(event) { 
  let animateMe = event.currentTarget.dataset.animatetarget;
  let divelement = document.getElementById(animateMe); 

  const isfoo = divelement.classList.contains("foo");
  // console.log(isfoo);
  divelement.classList.toggle("addedclass", isfoo);
  divelement.classList.toggle("foo", !isfoo);
}
let el = document.querySelector('.eco-btn')
  .addEventListener("click", toggle_div_fun);

.fun-target {
  overflow: hidden;
  background-color: #0000ff;
  color: #fff;
  display: flex;
  height: 0;
  padding: 0 2em;
  width: 100vw;
}

.fun-target {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all 2s ease;
}

.fun-target.addedclass {
  height: auto;
  padding: 2em 1em;
  font-size: 3em;
  background-color: #DDffff;
  color: #0000FF;
}

<button class="eco-btn" data-animatetarget='sectiontohide'>Click here</button>
<div id="sectiontohide" class="fun-target foo">This is the div to hide</div>

Animate a tag when display after clicking

2 Answers2

Linked