承载动态内容的可复用动画模板开发咨询（附代码示例）

Alright, let's break down how to build this reusable animated template for dynamic content. You mentioned you'll use React eventually, so I'll start with core CSS/JS logic (matching your snippet) then move to a reusable React component implementation.

First, we need CSS to handle content overlay, animation transitions, and state-based visibility. This sets up the foundation for smooth content toggling:

/* Template container: establishes positioning context for content */
.template-banner {
  position: relative;
  width: 100%;
  height: 400px; /* Adjust based on your needs */
  overflow: hidden; /* Prevent animated content from spilling outside */
}

/* Shared content styles: stack all content elements on top of each other */
.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out; /* Sync this duration with JS timing */
  opacity: 0;
  visibility: hidden;
}

/* Active state: make content visible and trigger entry animation */
.banner-content.active {
  opacity: 1;
  visibility: visible;
}

/* Custom animations for different content types */
.banner-content-big {
  transform: translateX(-100%); /* Start off-screen left */
}
.banner-content-big.active {
  transform: translateX(0); /* Slide in to position */
}

.banner-content-small {
  transform: scale(0.8); /* Start scaled down */
}
.banner-content-small.active {
  transform: scale(1); /* Scale to full size */
}

Let's refine your existing snippet to handle smooth animation transitions (not just abrupt content swaps). We'll wait for exit animations to finish before switching content:

var content = [ 
  "<div class='banner-content banner-content-big'>Big Content</div>", 
  "<div class='banner-content banner-content-small'>Small Content</div>" 
];
var contentIndex = 0;
const banner = document.querySelector(".template-banner");
const animationDuration = 500; // Match CSS transition duration

// Initialize with first content
banner.innerHTML = content[contentIndex];
banner.querySelector('.banner-content').classList.add('active');

function toggleBanner() {
  // Trigger exit animation on current content
  const currentContent = banner.querySelector('.active');
  currentContent.classList.remove('active');

  // Wait for exit animation to complete before swapping content
  setTimeout(() => {
    // Cycle to next content index
    contentIndex = contentIndex >= content.length - 1 ? 0 : contentIndex + 1;
    // Render new content and trigger entry animation
    banner.innerHTML = content[contentIndex];
    banner.querySelector('.banner-content').classList.add('active');
  }, animationDuration);
}

// Example: Auto-toggle every 3 seconds
setInterval(toggleBanner, 3000);

Since you're using React, here's how to turn this into a flexible, reusable component that accepts dynamic content and configurable options:

import { useState, useEffect } from 'react';

// Reusable animated banner component
const AnimatedBanner = ({ 
  contentList, 
  autoToggleInterval = 3000, 
  animationDuration = 500 
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  // Auto-toggle logic (clean up on unmount)
  useEffect(() => {
    const toggleTimer = setInterval(() => {
      setCurrentIndex(prev => prev >= contentList.length - 1 ? 0 : prev + 1);
    }, autoToggleInterval);
    return () => clearInterval(toggleTimer);
  }, [contentList.length, autoToggleInterval]);

  return (
    <div className="template-banner">
      {contentList.map((content, index) => (
        <div
          key={content.id || index}
          className={`banner-content ${content.className} ${index === currentIndex ? 'active' : ''}`}
          style={{ transitionDuration: `${animationDuration}ms` }}
        >
          {content.children}
        </div>
      ))}
    </div>
  );
};

// Example usage
const App = () => {
  const bannerContent = [
    { 
      id: 'big-content',
      className: 'banner-content-big',
      children: <h1>Featured Product Banner</h1>
    },
    { 
      id: 'small-content',
      className: 'banner-content-small',
      children: <p>Limited Time Offer: 20% Off!</p>
    }
  ];

  return <AnimatedBanner contentList={bannerContent} />;
};

export default App;

• Configurable Animations: Add props to let users pass custom enter/exit animation classes instead of hardcoding them.
• Accessibility: Add a pause button for auto-toggling, and ensure screen readers can detect the active content (use aria-hidden for inactive elements).
• Avoid InnerHTML: In React, always render components/JSX directly instead of using innerHTML to prevent XSS risks and stay aligned with React's data flow.

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