如何为添加.hide类的.slide元素实现指定CSS过渡效果？

Got it, let's break down why your current setup isn't working and fix it step by step.

The core issue here is that CSS transitions don't work with display: none/block — that property switches instantly, so there's no time for an animation to play out. Your original input[type="radio"]:checked ~ .slide rule uses display: block, and when you add the .hide class (which I assume sets display: none), there's no way for the transition to trigger.

Here's how to fix this:

1. Rewrite your CSS to use transition-friendly properties #

Instead of display, use opacity + visibility (or add transform for extra flair) — these properties support smooth transitions. Here's a sample setup:

/* Base state for slides: hidden, ready to transition */
.slide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px); /* Optional: adds a slight slide-up effect */
  transition: 
    opacity 0.3s ease-in-out, 
    visibility 0.3s ease-in-out, 
    transform 0.3s ease-in-out;
  /* Optional: prevent layout shift when hiding */
  position: relative;
  height: auto; /* Or set a fixed height if needed */
}

/* Show slide when corresponding radio is checked */
input[type="radio"]:checked ~ .slide {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hide class: triggers transition to hidden state */
.slide.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

2. Adjust your JS to trigger transitions correctly #

Your current JS adds .hide immediately when clicking .option, but if the slides are already hidden, the transition won't fire. Also, when switching radios, you need to ensure the old slide fades out before the new one fades in. Here's the updated JS:

$(".option").on("click", function() { 
  // Wait for the .window slideToggle to finish before hiding slides
  $(".window").slideToggle("fast", function() {
    $('.slide').addClass('hide'); 
  });
}); 

$(':radio').change(function(event) { 
  // Assume your radios have a data attribute linking to their target slide
  const targetSlideId = $(this).data('slide-target');
  
  // First hide all slides (triggers their exit transition)
  $('.slide').addClass('hide');
  
  // Then show the target slide by removing the hide class (triggers entry transition)
  setTimeout(() => {
    $('#' + targetSlideId).removeClass('hide');
  }, 300); // Match this delay to your CSS transition duration
});

Why this works: #

• opacity and visibility let the browser animate the fade effect, while visibility ensures the slide isn't interactive when hidden (unlike just using opacity: 0).
• The setTimeout in the radio change handler gives the old slide time to finish its exit transition before showing the new one — this prevents weird overlapping animations.
• Using the slideToggle callback ensures we only add .hide after the window animation completes, so the slide transition fires as expected.

Quick notes: #

• If you don't want layout shift, set a fixed height on .slide or use position: absolute to take it out of the document flow.
• Make sure your radio buttons have a data-slide-target attribute that matches the ID of their corresponding .slide element (e.g., <input type="radio" data-slide-target="slide-1"> paired with <div class="slide" id="slide-1">).

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