javascript - How can i make a blank square coming from out of the screen on a click?

Question

I have a small problem when developing an interactive map. I'm trying to make a square of information appear on the map by clicking on one of the buttons on the left. I am wondering what is the best solution to achieve this. I think I need to create a div with my information square with a display:none , which is displayed when clicking on the button with a display: block. The problem is that with this way of doing it, no animation occurs.

For reference, I would like an animation in this style https://infrastructure.aws/ , when you click on region, you see the square coming out of the screen with the information.

The link to my codepen: https://codepen.io/paul-k/pen/BaLXKNW The button where i want to add the event listener is

<button id="Regions">Regions</button>

Do you know in which way i can reproduce something like this?

Thank you very much, Have a nice day

question from:https://stackoverflow.com/questions/65902896/how-can-i-make-a-blank-square-coming-from-out-of-the-screen-on-a-click

Answer 1

Had done something like this with js. Here is my code

document.getElementById('open_button').addEventListener('click',
    function()
    {
        document.querySelector('.square').style.visibility = "visible";
        document.querySelector('.square').style.opacity = "1";
    });

document.getElementById('close_button').addEventListener('click',
    function()
    {
        document.querySelector('.square').style.visibility = "hidden";
        document.querySelector('.square').style.opacity = "0";
    });

There are button for opening square with class 'open_button' and button for closing square with class 'close_button'. And the element (square, mostly modal) you want to open or close with class 'square'.

Using visibility will solve your problem with animation (for example I used opacity for smooth transition).