Animate div visibility with CSS transitions and Javascript

Question

Animate div visibility with CSS transitions and Javascript

I'm currently working on incorporating an animation into a div that I am toggling between showing and hiding with a button click. While I have the desired animation, I am unsure of how to trigger it using JavaScript when the button is clicked. Can anyone provide assistance with this issue?

https://codepen.io/mattmcgilton/pen/JjjbGMB

.reveal-content {
    animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


 @keyframes slide-in-fwd-center {
    0% {
      transform: translateZ(-1400px);
      opacity: 0;
    }
    100% {
      transform: translateZ(0);
      opacity: 1;
    }
  }

var x = document.getElementById("reveal-content").style.display = "none";

document.getElementById("btn-reveal").addEventListener('click', function() {
    var x = document.getElementById("reveal-content");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
});

javascript html css

Answer 1

Answer №1

If you want to hide and show an element using a smooth transition, you can set a max-height for the element and apply the necessary CSS transitions. See the code snippet below:

document.getElementById("btn-reveal").addEventListener('click', function() {
  let el = document.getElementById('reveal-content');
  if (el.classList.contains('hide')) {
    el.classList.remove('hide');
  } else {
    el.classList.add('hide');
  }
});

.wrapper {
  overflow: hidden;
}

#reveal-content {
  max-height: 1000px;
  transition: all 0.5s ease-in;
}

.hide {
  max-height: 0 !important;
  transition: all 0.2s ease-out;
}

<button type="button" id="btn-reveal" class="btn">Button</button>
<div class="wrapper">
  <div id="reveal-content" class="hide">
    <h2>Hide me and then reveal me</h2>
    <div id="json-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque dui magna, imperdiet ultricies felis pellentesque nec. Aenean iaculis tellus porttitor sapien sagittis, eu dapibus dui ultricies. In gravida arcu leo, sit amet convallis quam
        tincidunt tempus. Aliquam eget suscipit tortor. Maecenas eget nunc eu risus auctor lacinia. Nulla et sapien sed urna ultrices pretium non ac purus. Quisque sed egestas augue. Aliquam sit amet vulputate tortor. Sed condimentum tellus eu placerat
        feugiat. Nullam quis eros sed magna venenatis condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere lacinia facilisis. Curabitur sit amet porta dui.</p>
    </div>
  </div>
</div>
<div>Rest of the page...</div>

Answer 2

If you want to hide and show an element using a smooth transition, you can set a max-height for the element and apply the necessary CSS transitions. See the code snippet below:

document.getElementById("btn-reveal").addEventListener('click', function() {
  let el = document.getElementById('reveal-content');
  if (el.classList.contains('hide')) {
    el.classList.remove('hide');
  } else {
    el.classList.add('hide');
  }
});

.wrapper {
  overflow: hidden;
}

#reveal-content {
  max-height: 1000px;
  transition: all 0.5s ease-in;
}

.hide {
  max-height: 0 !important;
  transition: all 0.2s ease-out;
}

<button type="button" id="btn-reveal" class="btn">Button</button>
<div class="wrapper">
  <div id="reveal-content" class="hide">
    <h2>Hide me and then reveal me</h2>
    <div id="json-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque dui magna, imperdiet ultricies felis pellentesque nec. Aenean iaculis tellus porttitor sapien sagittis, eu dapibus dui ultricies. In gravida arcu leo, sit amet convallis quam
        tincidunt tempus. Aliquam eget suscipit tortor. Maecenas eget nunc eu risus auctor lacinia. Nulla et sapien sed urna ultrices pretium non ac purus. Quisque sed egestas augue. Aliquam sit amet vulputate tortor. Sed condimentum tellus eu placerat
        feugiat. Nullam quis eros sed magna venenatis condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere lacinia facilisis. Curabitur sit amet porta dui.</p>
    </div>
  </div>
</div>
<div>Rest of the page...</div>

Answer 3

Answer №2

To handle the displaying aspect, your CSS code is already doing the heavy lifting so there's no need to repeat that in JavaScript. What you actually need is the classList.toggle() method. By using this method, you can easily add and remove the .reveal-content class on a click event. Your JavaScript code should look like this:

var div = document.querySelector("div");
var button = document.getElementById("btn-reveal");
button.addEventListener('click', function () {
   div.classList.toggle("reveal-content");
});

UPDATE:

var div = document.querySelector("div");
var button = document.getElementById("btn-reveal");
button.addEventListener('click', function () {
    if(div.classList.contains('slide-in-fwd-center')) {
        div.classList.add("slide-out-bck-center");
        div.classList.remove("slide-in-fwd-center");
    }
});
button.addEventListener('click', function () {
    if(div.classList.contains('slide-out-bck-center')) {
        div.classList.add("slide-in-fwd-center");
        div.classList.remove("slide-out-bck-center");
    }
});

In your CSS code, only one of the classes (.slide-in-fwd-center or .slide-out-bck-center) will be applied as a default.

Answer 4

To handle the displaying aspect, your CSS code is already doing the heavy lifting so there's no need to repeat that in JavaScript. What you actually need is the classList.toggle() method. By using this method, you can easily add and remove the .reveal-content class on a click event. Your JavaScript code should look like this:

var div = document.querySelector("div");
var button = document.getElementById("btn-reveal");
button.addEventListener('click', function () {
   div.classList.toggle("reveal-content");
});

UPDATE:

var div = document.querySelector("div");
var button = document.getElementById("btn-reveal");
button.addEventListener('click', function () {
    if(div.classList.contains('slide-in-fwd-center')) {
        div.classList.add("slide-out-bck-center");
        div.classList.remove("slide-in-fwd-center");
    }
});
button.addEventListener('click', function () {
    if(div.classList.contains('slide-out-bck-center')) {
        div.classList.add("slide-in-fwd-center");
        div.classList.remove("slide-out-bck-center");
    }
});

In your CSS code, only one of the classes (.slide-in-fwd-center or .slide-out-bck-center) will be applied as a default.

Animate div visibility with CSS transitions and Javascript

Answer №1

Answer №2

Similar questions

What is preventing me from assigning all padding values at once?

The issue of gallery image loading with the galleryView jQuery plugin is causing problems

I'm experiencing some issues with my scene in ThreeJS - the HDR background isn't displaying, and my cube

When attempting to modify an element in an array within a state-managed object, the input field loses focus

What methods can be used to incorporate animation when the display attribute transitions to none?

Can you explain the rationale behind html and js?

Why is my index.tsx file not properly exporting? (React + Typescript)

In Selenium IDE, the command to locate elements by ID works smoothly, but when using Java, the same

:after pseudo class not functioning properly when included in stylesheet and imported into React

Issues with login validation in HTML when utilizing JSON and PHP

Acquiring HTML form data using JavaScript

Animation in CSS/transform drifting out of view

Adjusting the image placement within a modal window (using bootstrap 3)

If you want to retrieve the calculated value of a div using jQuery

PHP POST request with an additional value being sent

What is the best way to send props to a component that is exported using a Store Provider?

The Angular 9 custom directive is malfunctioning on mobile devices

Is there a sleek way to create a JavaScript function that can provide two string values as output?

What are the best practices for running node in VSCode?

Creating a visually appealing gantt chart in React Native using the react-google-charts library - here's how!