单页面实现输入姓名提交后带过渡效果显示问候的技术咨询

没问题！单页面方案完美解决你的跨页传值问题，而且实现起来简洁直观。下面是完整的可运行代码，我会一步步拆解关键逻辑：

核心思路 #

把输入表单和问候界面放在同一个页面中，通过CSS类切换控制两个区域的显示状态，用JavaScript处理表单提交逻辑——全程不需要页面跳转，所有数据都在当前页面内处理，自然解决传值问题，同时轻松实现平滑过渡效果。

完整代码实现 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问候页面</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            min-height: 100vh;
            transition: all 0.5s ease;
        }

        /* 输入表单区域：居中布局 */
        .input-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .input-section input {
            padding: 12px 20px;
            font-size: 18px;
            margin-bottom: 20px;
            width: 300px;
            border: 2px solid #ddd;
            border-radius: 8px;
        }

        .input-section button {
            padding: 12px 40px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .input-section button:hover {
            background-color: #45a049;
        }

        /* 问候界面：初始隐藏，全屏布局 */
        .greeting-section {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f8ff;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
            font-size: 48px;
            color: #333;
        }

        /* 切换到问候状态的触发类 */
        body.show-greeting .input-section {
            opacity: 0;
            visibility: hidden;
            pointer-events: none; /* 防止隐藏后仍能点击表单 */
        }

        body.show-greeting .greeting-section {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body>
    <!-- 输入表单区域 -->
    <div class="input-section">
        <input type="text" id="nameInput" placeholder="请输入你的姓名">
        <button id="submitBtn">提交</button>
    </div>

    <!-- 问候界面（初始完全隐藏） -->
    <div class="greeting-section" id="greetingSection">
        Hello，<span id="displayName"></span>
    </div>

    <script>
        // 获取DOM元素
        const nameInput = document.getElementById('nameInput');
        const submitBtn = document.getElementById('submitBtn');
        const displayName = document.getElementById('displayName');
        const body = document.body;

        // 监听提交按钮点击
        submitBtn.addEventListener('click', function() {
            const userName = nameInput.value.trim();
            
            // 简单校验：避免空值提交
            if (!userName) {
                alert('请输入你的姓名哦！');
                return;
            }

            // 更新问候文本，触发状态切换
            displayName.textContent = userName;
            body.classList.add('show-greeting');
        });

        // 可选：点击问候界面返回输入状态
        document.getElementById('greetingSection').addEventListener('click', function() {
            body.classList.remove('show-greeting');
            nameInput.value = ''; // 清空输入框
            nameInput.focus(); // 自动聚焦输入框
        });
    </script>
</body>
</html>

关键细节说明 #

1. 状态切换逻辑：

   • 初始状态下，问候区域通过opacity: 0和visibility: hidden完全隐藏，输入表单正常显示
   • 提交后给body添加show-greeting类，通过CSS规则自动切换两个区域的显示状态，同时触发平滑过渡动画

2. 彻底解决传值问题：

   • 不需要任何跨页存储（比如localStorage、URL参数），直接从输入框获取值，赋值给问候区域的标签即可，数据全程在当前页面内存中处理

3. 过渡效果自定义：

   • 示例用了淡入淡出效果，你可以改成平移、缩放等动画，只需要修改CSS的transition属性和状态类的样式即可

4. 用户体验优化：

   • 加入了空值校验，避免无效提交
   • 可选的返回功能，点击问候界面就能回到输入状态，同时自动清空并聚焦输入框

这个方案简单可靠，完全符合你的需求，而且没有多页面的各种麻烦！

内容的提问来源于stack exchange，提问作者user9436060