reactjs - React 中的动画文本

Question

我正在尝试使用 scss 为 React 中的文本设置动画（可能没关系）。它不起作用。

在 SCSS 文件中：

.animate {
    animation: 3s linear 1s infinite alternate slidein;
}

应用于我的文字：

<h2 className="animate">Order is active.</h2>

我应该做更多的事情吗？感谢你的回答！

Answer 1

您必须使用带有@keyframe 的动画。@keyframe 指定做什么、动画何时以及如何 https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2。

或者您可以使用带有附加类名的“过渡” https://developer.mozilla.org/ru/docs/Web/CSS/transition

像这样的东西：

#scss
.main-class {
   opacity: 1;
   transition: 1s;
}
.hide-classname {
   opacity: 0;
   transition: 1s;
}

#jsx \ tsx
const [hide, setHide] = useState(false)

return(
    <div className={`main-class ${hide ? 'hide-classname' : null}`}>
         i will disappear
    </div>
)

Answer 2

您可以尝试检查react-animated-text-builders。这是一个支持一些文本动画的小库。没什么特别的，但也许这些动画足以满足您的目的：

<FloatingLettersTextBuilder
        floatingSpeed={500}
        lettersAppearanceDelay={250}
      > Floating Letters 
</FloatingLettersTextBuilder>
   

这会将文本从右向左滑动。

Answer 3

您可以使用选框：

<marquee behavior="slide" direction="down">Order is active.</marquee>

更多属性：https ://www.w3schools.in/html-tutorial/marquee-tag/

Answer 4

你可以使用这个为 react 构建的 npm 包处理任何类型的动画，如低级到高级动画。react-transition-group. mountOnEnter是它的未来之一。它安装组件并根据布尔条件启动动画。这些动画状态将在来自 css 的类前缀中处理。

• 进入
• 进入
• 退出
• 退出

animate.css可以在上述状态下处理所有类型的动画可能性。