How to animate overflowing text to scroll to the end of the text when hovering and animate back to original position when mouse leaves?

huangapple
go评论119阅读模式
英文:

How to animate overflowing text to scroll to the end of the text when hovering and animate back to original position when mouse leaves?

问题

我正在尝试在悬停在具有溢出文本的容器上时实现滚动文本的动画效果。目前，当鼠标悬停在容器上时，动画会滚动到文本的末尾，但当鼠标离开时，文本突然返回到原始位置。我希望在鼠标离开时也能实现回到原始位置的动画效果。

  1. import { useEffect, useRef, useState } from 'react';
  2. import classes from './test.module.css';
  4. const Test = () => {
  5.     const textRef = useRef(null);
  6.     const containerRef = useRef(null);
  8.     const [isHovered, setIsHovered] = useState(false);
  9.     const [isOverflowing, setIsOverflowing] = useState(false);
  11.     const onMouseEnter = () => {
  12.         setIsHovered(true);
  13.     };
  15.     const onMouseLeave = () => {
  16.         setIsHovered(false);
  17.     };
  19.     useEffect(() => {
  20.         const textWidth = textRef.current.offsetWidth;
  21.         const containerWidth = containerRef.current.offsetWidth;
  23.         if (textWidth > containerWidth) {
  24.             setIsOverflowing(true);
  25.         }
  26.     }, []);
  28.     return (
  29.         <div>
  30.             <div
  31.                 ref={containerRef}
  32.                 className={classes.animated}
  33.                 onMouseEnter={onMouseEnter}
  34.                 onMouseLeave={onMouseLeave}
  35.             >
  36.                 <h3
  37.                     className={isHovered && isOverflowing ? classes.textAnimated : classes.text}
  38.                     ref={textRef}
  39.                 >
  40.                     This is some very very very long text
  41.                 </h3>
  42.             </div>
  43.         </div>
  44.     );
  45. };
  47. export default Test;
  1. .animated {
  2.     margin: 200px;
  3.     position: relative;
  4.     white-space: nowrap;
  5.     max-width: 300px;
  6.     width: 100%;
  7.     overflow: hidden;
  8.     background: #0c0c0c;
  9.     display: inline-block;
  10.     position: relative;
  11.     border: 1px solid white;
  12. }
  14. .textAnimated {
  15.     color: #fff;
  16.     animation: textScroll 3s linear forwards;
  17.     display: inline-block;
  18.     position: relative;
  19. }
  21. .text {
  22.     color: #fff;
  23.     display: inline-block;
  24.     position: relative;
  25. }
  27. @keyframes textScroll {
  28.     0% {
  29.         transform: translateX(0);
  30.         left: 0;
  31.     }
  32.     10% {
  33.         transform: translateX(0);
  34.         left: 0;
  35.     }
  36.     90% {
  37.         transform: translateX(calc(-100%));
  38.         left: 100%;
  39.     }
  40.     100% {
  41.         transform: translateX(calc(-100%));
  42.         left: 100%;
  43.     }
  44. }
英文:

I am trying to animate scrolling text when hovering over a container that has overflowing text. Right now I have the animation scrolling to the end of the text when hovering over the container, but when the mouse leaves, the text just suddenly goes back to original position. I want it to also animate back to original position when the mouse leaves.

  1. import {useEffect, useRef, useState} from &#39;react&#39;;
  2. import classes from &#39;./test.module.css&#39;;
  4. const Test = () =&gt; {
  5.     const textRef = useRef(null);
  6.     const containerRef = useRef(null);
  8.     const [isHovered, setIsHovered] = useState(false);
  9.     const [isOverflowing, setIsOverflowing] = useState(false);
  11.     const onMouseEnter = () =&gt; {
  12.         setIsHovered(true);
  13.     };
  15.     const onMouseLeave = () =&gt; {
  16.         setIsHovered(false);
  17.     };
  19.     useEffect(() =&gt; {
  20.         const textWidth = textRef.current.offsetWidth;
  21.         const containerWidth = containerRef.current.offsetWidth;
  23.         if (textWidth &gt; containerWidth) {
  24.             setIsOverflowing(true);
  25.         }
  26.     }, []);
  28.     return (
  29.         &lt;div&gt;
  30.             &lt;div ref={containerRef} className={classes.animated} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}&gt;
  31.                 &lt;h3 className={isHovered &amp;&amp; isOverflowing ? classes.textAnimated : classes.text} ref={textRef}&gt;
  32.                     This is some very very very long text
  33.                 &lt;/h3&gt;
  34.             &lt;/div&gt;
  35.         &lt;/div&gt;
  36.     );
  37. };
  39. export default Test;
  1. .animated {
  2.     margin: 200px;
  3.     position: relative;
  4.     white-space: nowrap;
  5.     max-width: 300px;
  6.     width: 100%;
  7.     overflow: hidden;
  8.     background: #0c0c0c;
  9.     display: inline-block;
  10.     position: relative;
  11.     border: 1px solid white;
  12. }
  14. .textAnimated {
  15.     color: #fff;
  16.     animation: textScroll 3s linear forwards;
  17.     display: inline-block;
  18.     position: relative;
  19. }
  21. .text {
  22.     color: #fff;
  23.     display: inline-block;
  24.     position: relative;
  25. }
  27. @keyframes textScroll {
  28.     0% {
  29.         transform: translateX(0);
  30.         left: 0;
  31.     }
  32.     10% {
  33.         transform: translateX(0);
  34.         left: 0;
  35.     }
  36.     90% {
  37.         transform: translateX(calc(-100%));
  38.         left: 100%;
  39.     }
  40.     100% {
  41.         transform: translateX(calc(-100%));
  42.         left: 100%;
  43.     }
  44. }

答案1

得分: 0

请考虑使用 transition 而不是 animation。在悬停时，transition 对于在两个状态之间进行视觉插值非常有用，正如此处的情况一样：

  1. <!-- begin snippet: js hide: false console: false babel: true -->
  3. <!-- language: lang-js -->
  4. const { useEffect, useRef, useState } = React;
  6. const Test = () => {
  7.   const textRef = useRef(null);
  8.   const containerRef = useRef(null);
  10.   const [isOverflowing, setIsOverflowing] = useState(false);
  12.   useEffect(() => {
  13.     const textWidth = textRef.current.offsetWidth;
  14.     const containerWidth = containerRef.current.offsetWidth;
  16.     if (textWidth > containerWidth) {
  17.       setIsOverflowing(true);
  18.     }
  19.   }, []);
  21.   return (
  22.     <div>
  23.       <div ref={containerRef} className="animated">
  24.         <h3 className={isOverflowing ? 'textAnimated' : 'text'} ref={textRef}>
  25.           This is some very very very long text
  26.         </h3>
  27.       </div>
  28.     </div>
  29.   );
  30. };
  32. ReactDOM.createRoot(document.getElementById('app')).render(<Test/>);
  34. <!-- language: lang-css -->
  35. .animated {
  36.     margin: 200px;
  37.     position: relative;
  38.     white-space: nowrap;
  39.     max-width: 100px;
  40.     width: 100%;
  41.     overflow: hidden;
  42.     background: #0c0c0c;
  43.     display: inline-block;
  44.     position: relative;
  45.     border: 1px solid white;
  46. }
  48. .textAnimated {
  49.     color: #fff;
  50.     display: inline-block;
  51.     position: relative;
  52.     left: 0;
  53.     transition: transform 3s linear, left 3s linear;
  54. }
  55. .animated:hover .textAnimated {
  56.   transform: translateX(-100%);
  57.   left: 100%;
  58. }
  60. .text {
  61.     color: #fff;
  62.     display: inline-block;
  63.     position: relative;
  64. }
  66. <!-- language: lang-html -->
  67. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  68. <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  70. <div id="app"></div>
  72. <!-- end snippet -->

注意：以上代码片段中包含了HTML、JavaScript和CSS部分。如果需要进一步的翻译，请提供具体的文本或指令。

英文:

Consider using transition rather than animation. transition is useful for visual interpolation between two states, as would be the case here on hover:

<!-- begin snippet: js hide: false console: false babel: true -->

<!-- language: lang-js -->

  1. const {useEffect, useRef, useState} = React;
  3. const Test = () =&gt; {
  4.   const textRef = useRef(null);
  5.   const containerRef = useRef(null);
  7.   const [isOverflowing, setIsOverflowing] = useState(false);
  9.   useEffect(() =&gt; {
  10.     const textWidth = textRef.current.offsetWidth;
  11.     const containerWidth = containerRef.current.offsetWidth;
  13.     if (textWidth &gt; containerWidth) {
  14.       setIsOverflowing(true);
  15.     }
  16.   }, []);
  18.   return (
  19.     &lt;div&gt;
  20.       &lt;div ref={containerRef} className=&quot;animated&quot;&gt;
  21.         &lt;h3 className={isOverflowing ? &#39;textAnimated&#39; : &#39;text&#39;} ref={textRef}&gt;
  22.           This is some very very very long text
  23.          &lt;/h3&gt;
  24.        &lt;/div&gt;
  25.     &lt;/div&gt;
  26.   );
  27. };
  29. ReactDOM.createRoot(document.getElementById(&#39;app&#39;)).render(&lt;Test/&gt;);

<!-- language: lang-css -->

  1. .animated {
  2.     margin: 200px;
  3.     position: relative;
  4.     white-space: nowrap;
  5.     max-width: 100px;
  6.     width: 100%;
  7.     overflow: hidden;
  8.     background: #0c0c0c;
  9.     display: inline-block;
  10.     position: relative;
  11.     border: 1px solid white;
  12. }
  14. .textAnimated {
  15.     color: #fff;
  16.     display: inline-block;
  17.     position: relative;
  18.     left: 0;
  19.     transition: transform 3s linear, left 3s linear;
  20. }
  21. .animated:hover .textAnimated {
  22.   transform: translateX(-100%);
  23.   left: 100%;
  24. }
  26. .text {
  27.     color: #fff;
  28.     display: inline-block;
  29.     position: relative;
  30. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js&quot; integrity=&quot;sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js&quot; integrity=&quot;sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  4. &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 08:05:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/76577371.html
  • css
  • javascript
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定