59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
"use client";
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
const stringsDefault = [
|
|
"your business.",
|
|
"your portfolio.",
|
|
"your startup.",
|
|
"digital marketing.",
|
|
];
|
|
|
|
const AnimatedText = ({ strings = stringsDefault }) => {
|
|
// 过滤掉空字符串
|
|
const filteredStrings = strings.filter(str => !!str && str.trim() !== "");
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [animatedText, setAnimatedText] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (filteredStrings.length === 0) return;
|
|
const interval = setInterval(() => {
|
|
setAnimatedText(false);
|
|
setTimeout(() => {
|
|
setAnimatedText(true);
|
|
}, 200);
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % filteredStrings.length);
|
|
}, 5000);
|
|
return () => clearInterval(interval); // Cleanup interval on component unmount
|
|
}, [filteredStrings]);
|
|
|
|
if (filteredStrings.length === 0) return null;
|
|
|
|
return (
|
|
<>
|
|
{animatedText ? (
|
|
<span
|
|
className={`animate__animated animate__fadeInDown`}
|
|
style={{
|
|
display: "inline-block",
|
|
visibility: "visible",
|
|
}}
|
|
>
|
|
{filteredStrings[currentIndex]}
|
|
</span>
|
|
) : (
|
|
<span
|
|
className={``}
|
|
style={{
|
|
display: "inline-block",
|
|
visibility: "hidden",
|
|
}}
|
|
>
|
|
{filteredStrings[currentIndex]}
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AnimatedText;
|