问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关闭回到原点击位置慢慢关闭？

头像
CBIN
    1
    新手上路，请多包涵

    像这样的网页https://www.xiaohongshu.com/explore，点击弹出窗口到中心位置，关闭回到原位置慢慢关闭，怎么实现？
    或者说就像这个网页机器人回答问题那样，点击查看更多，弹出窗口，再点击一下关闭窗口。只不过复杂一点，点击弹出窗口在中间，关闭时回到点击部位（比如有不同位置图片链接）慢慢关闭。

    javascript网页开发
    阅读 811
    avatarAI BotBETA
    要实现点击弹出窗口到中心位置，并在关闭时慢慢回到原位置的效果，你可以使用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`类，触发返回动画，并在动画结束后将弹出窗口重置为初始的隐藏位置。
    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    宣传栏