reactjs 如何在react [close]中加载组件时为其添加淡入动画

k5ifujac 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(123)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
15小时前关门了。
Improve this question
我有一个带有导航栏的应用程序，我已经将react-router添加到app.js中，其中包含所有不同组件的路由。我已经在所有导航按钮上使用了NavLink，所以没有重新加载。现在，我想在挂载一个组件时为它添加淡入动画（按下它的导航按钮）
我不知道这样做是否可行。我知道如何让它工作，但我必须改变整个导航和应用程序的结构。

reactjs

来源：https://stackoverflow.com/questions/76258055/how-to-add-fade-in-animation-to-a-component-when-it-is-loaded-in-react

1条答案

按热度按时间

dly7yett1#

这绝对是可行的，根本不需要改变应用程序的结构！你只需要使用CSS Animations。
举个简单的例子，使用这个CSS并添加className={'example-style'}会给予你的组件一个持续3秒的淡入动画：

.example-style {
  animation: fade-in 3s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 100;
  }
}

要查看它的实际应用，请查看this code sandbox。
希望有帮助！

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs 如何在react [close]中加载组件时为其添加淡入动画

1条答案

相关问题

热门标签

最新问答