На веб-сайте есть следующий блок:
При нажатии на кнопки, все блоки внутри контейнера должны плавно выезжать. Это реализовано в коде ниже. Но, если часто нажимать на кнопки, то анимация зависает и почти пропадает:
Подскажите, в чём проблема?
function AdvantagesContent() {
const [selectedCategory, setSelectedCategory] = useState('Покупка')
const advantagesRef = useRef(null)
const animationRef = useRef(null)
const { language, changeLanguage } = useContext(LanguageContext)
const handleCategoryClick = category => {
setSelectedCategory(category)
}
const ACTUAL_ADVANTAGES = (() => {
switch (selectedCategory) {
case 'Покупка':
return language === 'ru' ? PURCHASES : PURCHASES_EN
case 'Продажа':
return language === 'ru' ? SALES : SALES_EN
case 'Аренда':
return language === 'ru' ? RENT : RENT_EN
case 'Управление':
return language === 'ru' ? MANAGEMENS : MANAGEMENS_EN
default:
return language === 'ru' ? PURCHASES : PURCHASES_EN
}
})()
// Анимация появления преимуществ при изменении категории
useEffect(() => {
if (animationRef.current) {
animationRef.current.kill()
console.log('animationRef')
}
animationRef.current = gsap.from(advantagesRef.current, {
opacity: 0,
y: -60,
duration: 1.2,
stagger: 0,
})
}, [selectedCategory])
return (
<div id='AdvantagesMenuHook' className='advantagesContent'>
<div className='description'>
{language === 'ru' ? 'Наши преимущества' : 'Our competitive advantages'}
</div>
<div className='title'>
{language === 'ru'
? ['Почему выбирают ', <br />, 'именно нас?']
: ['What makes us the ', <br />, 'go-to choice?']}
</div>
<div className='advantages' ref={advantagesRef}>
{ACTUAL_ADVANTAGES.map((advantage, index) => (
<Advantage
key={index}
icon={advantage.icon}
title={advantage.title}
description={advantage.description}
/>
))}
</div>
<CategorySelector
selectedCategory={selectedCategory}
onCategoryClick={handleCategoryClick}
/>
</div>
)
}