我怎么能使一个空白的正方形来自屏幕上的点击?

Question

我在开发交互式地图时遇到了一个小问题。我试图通过点击左边的一个按钮，使信息出现在地图上。我想知道实现这一目标的最佳解决方案是什么。我想我需要创建一个div与我的信息广场与display:none，这是在点击按钮时显示与display:块。问题是，用这种方法，没有动画发生。

作为参考，我想在这种风格的动画https://infrastructure.aws/，当你点击区域，你看到的正方形出来的屏幕与信息。

链接到我的合作伙伴:https://codepen.io/paul-k/pen/BaLXKNW我要添加事件侦听器的按钮是

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

你知道我用什么方法可以复制这样的东西吗?非常感谢，祝你过得愉快

Answer 1

用js做过类似的事情。这是我的代码

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";
});

有按钮用于打开类'open_button'和按钮用于关闭类'close_button'方形。元素(square，主要是modal)你想用'square'类打开或关闭。

使用可见性将解决你的动画问题(例如，我使用不透明度平滑过渡)。