页面加载前姓名输入-欢迎页渐变切换功能开发求助

Hey there! Let's get that smooth three-step transition working for you. I've built out a complete implementation that matches exactly what you described—name input → welcome screen with the user's name → main page, all with nice fade effects. Here's how to pull it off:

Complete Working Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Name Transition Flow</title>
    <style>
        /* Base styles for all screens */
        .screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.6s ease-in-out;
            background: #f0f0f0;
        }

        /* Hide screens by default except the input screen */
        .welcome-screen, .main-screen {
            opacity: 0;
            pointer-events: none; /* Prevent interaction when hidden */
        }

        /* Fade out class */
        .fade-out {
            opacity: 0;
            pointer-events: none;
        }

        /* Fade in class */
        .fade-in {
            opacity: 1;
            pointer-events: auto;
        }

        /* Input form styles */
        #name-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        #name-input {
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        #submit-btn {
            padding: 0.8rem;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }

        /* Welcome and main screen text styles */
        .screen h1 {
            color: #333;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <!-- Name Input Screen -->
    <div class="screen input-screen" id="input-screen">
        <form id="name-form">
            <label for="name-input">Enter your name:</label>
            <input type="text" id="name-input" required placeholder="Your name here">
            <button type="submit" id="submit-btn">Submit</button>
        </form>
    </div>

    <!-- Welcome Screen -->
    <div class="screen welcome-screen" id="welcome-screen">
        <h1 id="welcome-text"></h1>
    </div>

    <!-- Main Page Screen -->
    <div class="screen main-screen" id="main-screen">
        <h1>Welcome to the Main Page!</h1>
        <p>This is where your main content lives.</p>
    </div>

    <script>
        // Get elements
        const inputScreen = document.getElementById('input-screen');
        const welcomeScreen = document.getElementById('welcome-screen');
        const mainScreen = document.getElementById('main-screen');
        const nameForm = document.getElementById('name-form');
        const welcomeText = document.getElementById('welcome-text');

        // Handle form submission
        nameForm.addEventListener('submit', (e) => {
            e.preventDefault(); // Stop page reload
            const userName = document.getElementById('name-input').value.trim();
            
            if (userName) {
                // Update welcome text
                welcomeText.textContent = `Welcome, ${userName}!`;
                
                // Fade out input screen, fade in welcome screen
                inputScreen.classList.add('fade-out');
                setTimeout(() => {
                    welcomeScreen.classList.add('fade-in');
                    
                    // After 2 seconds, fade out welcome screen and fade in main page
                    setTimeout(() => {
                        welcomeScreen.classList.add('fade-out');
                        setTimeout(() => {
                            mainScreen.classList.add('fade-in');
                        }, 600); // Match transition duration
                    }, 2000); // Adjust how long welcome screen stays visible
                }, 600); // Match transition duration
            }
        });
    </script>
</body>
</html>

Key Details Explained #

• CSS Transitions: We use opacity with a transition property instead of display: none because transitions don't work with display changes. The pointer-events: none ensures hidden screens don't capture clicks accidentally.
• Fade Classes: .fade-in and .fade-out toggle opacity and pointer events to control both visibility and interactivity.
• Sequential Timing: Nested setTimeout calls sync the transitions with the CSS animation duration (600ms here) so everything flows smoothly. You can tweak the 2000ms value to change how long the welcome screen stays visible.
• Form Handling: We block the default form submission behavior to avoid page reloads, then grab the input value to populate the personalized welcome text.

Feel free to adjust colors, transition speeds, or layout styles to match your design. If you need help tweaking any part, just let me know!

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