当鼠标悬停在一个有溢出文本的容器上时,我正在尝试动画滚动文本。现在,当鼠标悬停在容器上时,我让动画滚动到文本的末尾,但是当鼠标离开时,文本突然回到原来的位置。我希望它也动画回到原来的位置时,鼠标离开。
import {useEffect, useRef, useState} from 'react';
import classes from './test.module.css';
const Test = () => {
const textRef = useRef(null);
const containerRef = useRef(null);
const [isHovered, setIsHovered] = useState(false);
const [isOverflowing, setIsOverflowing] = useState(false);
const onMouseEnter = () => {
setIsHovered(true);
};
const onMouseLeave = () => {
setIsHovered(false);
};
useEffect(() => {
const textWidth = textRef.current.offsetWidth;
const containerWidth = containerRef.current.offsetWidth;
if (textWidth > containerWidth) {
setIsOverflowing(true);
}
}, []);
return (
<div>
<div ref={containerRef} className={classes.animated} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<h3 className={isHovered && isOverflowing ? classes.textAnimated : classes.text} ref={textRef}>
This is some very very very long text
</h3>
</div>
</div>
);
};
export default Test;
.animated {
margin: 200px;
position: relative;
white-space: nowrap;
max-width: 300px;
width: 100%;
overflow: hidden;
background: #0c0c0c;
display: inline-block;
position: relative;
border: 1px solid white;
}
.textAnimated {
color: #fff;
animation: textScroll 3s linear forwards;
display: inline-block;
position: relative;
}
.text {
color: #fff;
display: inline-block;
position: relative;
}
@keyframes textScroll {
0% {
transform: translateX(0);
left: 0;
}
10% {
transform: translateX(0);
left: 0;
}
90% {
transform: translateX(calc(-100%));
left: 100%;
}
100% {
transform: translateX(calc(-100%));
left: 100%;
}
}
1条答案
按热度按时间e4eetjau1#
考虑使用
transition
而不是animation
。transition
对于两个状态之间的视觉插值很有用,就像悬停时的情况一样: