javascript - 关闭回到原点击位置慢慢关闭？
像这样的网页https://www.xiaohongshu.com/explore，点击弹出窗口到中心位置，关闭回到原位置慢慢关闭，怎么实现？
或者说就像这个网页机器人回答问题那样，点击查看更多，弹出窗口，再点击一下关闭窗口。只不过复杂一点，点击弹出窗口在中间，关闭时回到点击部位（比如有不同位置图片链接）慢慢关闭。
共有1个答案
要实现点击弹出窗口到中心位置，并在关闭时慢慢回到原位置的效果，你可以使用CSS和JavaScript来完成。以下是一个基本的实现思路：
1. **HTML**: 创建一个弹出窗口的容器和触发按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<link rel="stylesheet" href="styles.css"></head>
<body>
<button id="openPopup">Open Popup</button>
<div id="popup" class="popup">
<button id="closePopup">Close</button>
<!-- Popup content here -->
</div>
<script src="script.js"></script></body>
</html>
2. **CSS**: 设置弹出窗口的初始样式、动画效果以及定位。
/ styles.css /
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;}
popup {
position: fixed;
top: -100%; /* Initially off-screen */
left: 50%;
transform: translateX(-50%);
background-color: white;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
opacity: 0;
transition: top 0.5s ease-out, opacity 0.5s ease-out;}
popup.active {
top: 50%;
transform: translateY(-50%) translateX(-50%);
opacity: 1;}
3. **JavaScript**: 控制弹出窗口的显示和隐藏，以及动画效果。
// script.js
document.getElementById('openPopup').addEventListener('click', function() {
const popup = document.getElementById('popup');
popup.classList.add('active');});
document.getElementById('closePopup').addEventListener('click', function() {
const popup = document.getElementById('popup');
popup.classList.remove('active');
// Optionally, reset the popup position after the animation completes
popup.addEventListener('transitionend', function() {
if (!popup.classList.contains('active')) {
popup.style.top = '-100%'; // Reset to initial off-screen position
}
}, { once: true });});
在这个例子中，当点击“Open Popup”按钮时，弹出窗口会通过添加`active`类来触发CSS中的动画效果，从而平滑地移动到屏幕中心。当点击“Close”按钮时，会移除`active`类，触发返回动画，并在动画结束后将弹出窗口重置为初始的隐藏位置。-
问题内容： 并且部分地收到了这个答案，这似乎表明bind应该比闭包更快： 范围遍历意味着，当您要获取存在于另一个范围中的值（变量，对象）时，因此会增加额外的开销（代码执行起来会变慢）。 使用bind，您正在使用现有范围调用函数，这样就不会发生范围遍历。 两个jsperfs表示bind实际上比闭包慢得多。 这是对以上内容的评论 而且，我决定编写自己的jsperf 那么，为什么结合速度这么慢（铬含量超
-
这个查询工作正常，但速度很慢。 此数据库有3个字段： 我需要这个： MP3、artist和artist_relations每个都有超过20000张唱片 -- 如果不存在则创建表(int(11)NOT NULL，int(11)NOT NULL)engine=innoDB默认charset=latin1； -- 如果不存在则创建表(int(11)不为NULL AUTO_INCREMENT，varcha
-
定位到iframe页面上的关闭按钮点击失效vue3？
-
如何让我的动作监听器单击按钮并将按钮文本显示到文本区域？ 在actionlistener之后初始化，因此当我尝试定义
-
我注意到，当我启动Xcode8 iPhone模拟器时，我使用模拟器时所做的动作运行非常慢，例如，当我通过单击Hardware>home或Shift+CMD+H来操作主屏幕时，它运行良好，但当我打开应用程序时，边框会产生奇怪的动画，当我点击应用程序上的按钮时，过渡需要很长时间。对不起，还是这么长的问题，但任何帮助都将不胜感激
-
问题内容： 这是很常见的事情，例如，如果您在此处单击stackoverflow上的收件箱。我会打电话给那个对话框或任何被打开的 东西 。 现在我知道有两种方法可以解决这个问题， 你创建一个无形的覆盖，但只有用户打开该元素具有更大的zIndex以及您关闭 的事情 上叠加通过点击 点击文档事件，而你检查在点击你是否点击你的事还是境外，在这种情况下，你闭上你 的事 。 无论哪种情况，我都希望使用添加/删
-
我遇到了java在SSL上使用时速度较慢的问题。解决方案是添加 现在，java.security文件已经包含 “/dev/urandom”与“/dev/./urandom”不同的原因和方式。为什么java不接受“/dev/urandom” 对于我正在运行的JVM，如何判断它们是否使用了正确的urandmon设备（vs random)
-
这对你们来说可能很简单，但我还是很困惑 请考虑以下代码 null null 现在我期望的期望值分别是8和100。但是，它只给了我100。 这是为什么？