如何用CSS实现类似Hioscar表单的输入完成后切换动画？

Got it, let's break down how to build that form animation where each step slides up and fades out once completed, revealing the next one. Your hover example is a solid starting point, but we need to trigger the animation based on user input instead of hover. Here's a complete, working implementation:

Step 1: Structure Your Form #

First, wrap each form section in a container so we can animate them individually. We'll stack all steps on top of each other initially:

<form class="step-form">
  <div class="form-step active">
    <label for="full-name">Full Name</label>
    <input type="text" id="full-name" required placeholder="John Doe">
  </div>
  <div class="form-step">
    <label for="email">Email Address</label>
    <input type="email" id="email" required placeholder="john@example.com">
  </div>
  <div class="form-step">
    <label for="zip-code">Zip Code</label>
    <input type="text" id="zip-code" required placeholder="90210">
  </div>
</form>

Step 2: Add CSS for Animation #

We'll use CSS transitions to handle the slide and fade effects. Absolute positioning keeps all steps in the same spot:

/* Base form layout */
.step-form {
  position: relative;
  max-width: 450px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.form-step {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(25px); /* Start slightly below view */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing curve */
}

/* Show the active step */
.form-step.active {
  opacity: 1;
  transform: translateY(0);
}

/* Animation for completed step */
.form-step.completed {
  opacity: 0.2;
  transform: translateY(-30px); /* Slide up and fade out */
}

/* Optional input styling */
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

Step 3: JavaScript to Trigger Animation #

We need to detect when a user has filled out a field (and it's valid) then trigger the animation. We'll use HTML5's built-in validation to check if the input is complete:

const formSteps = document.querySelectorAll('.form-step');
const inputs = document.querySelectorAll('.form-step input');

inputs.forEach(input => {
  // Listen for input changes (works for text, email, number fields)
  input.addEventListener('input', handleStepCompletion);
  
  // For select dropdowns, replace 'input' with 'change' event
});

function handleStepCompletion(e) {
  const input = e.target;
  const currentStep = input.closest('.form-step');
  
  // Check if the input meets validation rules
  if (input.checkValidity()) {
    // Trigger the completed animation
    currentStep.classList.add('completed');
    
    // Wait for animation to finish before switching steps
    setTimeout(() => {
      currentStep.classList.remove('active', 'completed');
      
      // Show the next step if it exists
      const nextStep = currentStep.nextElementSibling;
      if (nextStep) {
        nextStep.classList.add('active');
      } else {
        // All steps done! Add form submission logic here
        alert('Form completed successfully!');
      }
    }, 300); // Match the transition duration in CSS
  }
}

Key Customization Tips #

• Adjust Animation Speed: Tweak the transition duration in CSS or the setTimeout value to make the animation faster or slower.
• Custom Validation: Replace input.checkValidity() with your own logic (like minimum character count) if you need more control over when a step is considered complete.
• Back Button Support: Add a button to each step (except the first) that reverses the animation and switches back to the previous step.
• Dropdowns: For select elements, use the change event instead of input since inputs don't fire on dropdown selections.

This setup will replicate the smooth step transition you're aiming for—each step slides up and fades out once the user completes the field, then the next step appears seamlessly.

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