如何在组件加载时添加淡入淡出动画

Question

我有一个带导航栏的应用程序，我已经将 react-router 添加到 app.js 中，其中包含到所有不同组件的路由。我在所有导航按钮上都使用了 NavLink，因此无需重新加载。现在，我想在挂载组件时为其添加淡入动画（按下导航按钮）

我不知道这是否可能。我知道让它工作的方法，但我必须改变整个导航和应用程序的结构。

Answer 1

这绝对可行，根本不需要更改应用程序的结构！你只需要使用CSS Animations.

举个简单的例子，使用这个 CSS 并添加

className={'example-style'}

会给你的组件一个持续 3 秒的淡入动画：

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

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

要查看实际效果，请查看此代码沙箱。

希望有帮助！