В настоящее время я ищу решение проблемы с дочерним компонентом.
У меня есть компонент, который обычно воспроизводит анимацию в соответствии с ее «видимостью» с помощью react-intersection-observer
. Анимация прекрасно воспроизводится при прокрутке вниз, но у меня возникает проблема при прокрутке вверх (обычно анимация сбрасывается).
Я заметил, что мой дочерний компонент не имеет значения с его offsetTop
. Можно ли по-прежнему воспроизводить анимацию или нет?
Вот часть моего кода:
const Info = () => {
const [infoSetRef, infoRef, infoInView] = useScrollAnimation();
return (
<div ref={infoSetRef} style={{minHeight: '10px'}} className={`timeline-content${left ? ' right' : ''}`}>
<Slide in={infoInView || (infoRef.current && infoRef.current.offsetTop < window.scrollY)}
direction={left ? 'left' : 'right'} timeout={{enter: 800, exit: 1000}}>
<div>
<h2 className="timeline-content-date">{date}</h2>
{image && <img src={image}/>}
</div>
</Slide>
{/*language=CSS*/}
<style jsx>{`
h2 {
font-size: 20px !important;
padding-bottom: 5px !important;
min-height: 60px !important;
}
`}</style>
</div>
)
}