javascript - 如何使用 ReactCSStransitionGroup 或 ReactTransitionGroup 在 React JS 中向下滑动无状态组件?

标签 javascript css reactjs css-transitions react-transition-group

我想滑动一个无状态组件,该组件最初设置为 display:none,以便在其父组件之一的状态更改后可见,就好像它向下滑动一样落下。 我是动画部分的新手,我正在尝试 this_link .

到目前为止,我在 Sandbox ( https://codesandbox.io/s/0xrjp051pp) 中尝试了什么。

有人可以帮忙吗?

最佳答案

这里是修改后的沙盒,过渡正常。 https://codesandbox.io/s/nrz8vlmrrl您唯一需要修复的是 CSS 代码,以使其按预期工作。

我做的修改如下。

  1. 更改了 CSS 中的过渡类以显示组件。它有显示:以前没有。
  2. 根据您传递但未在组件 SubComponent 中使用的 Prop 显示和隐藏组件。

关于javascript - 如何使用 ReactCSStransitionGroup 或 ReactTransitionGroup 在 React JS 中向下滑动无状态组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46651890/

相关文章:

javascript - 如何在返回函数中返回两个 map 值 - React js

javascript - Tampermonkey 中使用 javascript 进行页面搜索和文本框自动填充

javascript - 如何使用 DIV 叠加而不丢失下面层中的鼠标行为?

javascript - 从 html 到 ts 的值

javascript - 使用 react-router 滚动到同一页面上的组件

django - React + Django 的最佳安全实践

javascript通过属性检查在另一个对象数组中添加或替换对象

html - 如何将元素(DIV/TABLE/其他)高度设置为其容器的 100%?

php - 根据div的数量创建一系列点按钮

html - 如何在选择下拉菜单上设置 Font Awesome 图标?