Reactjs 带有React的动画

我必须创建一些复杂的动画。用jQuery或VanillaJS开发它们很酷，但我想我应该用React选择另一种方式。谷歌给了我ReactCSStransitongGroup，但它似乎已被破坏，无法维护（根据这条消息：）。在开始动画之前，我不能延迟

---

我还发现了一个名为React motion的库，但我不确定它是否真的是我需要的工具。所以我想问你是否可以向我推荐一些关于它的东西。也许我应该使用VanillaJS（使用refs和其他ReactDOM函数）？还是有别的办法？提前谢谢

也许可以帮助您。

在React中，或者实际上在web上的任何地方，制作动画最简单的方法是使用CSS转换

CSS转换实际上与React无关。引用

CSS转换是一个CSS模块，允许您创建 特定CSS属性值之间的渐变。这个 这些转换的行为可以通过指定它们的 计时功能、持续时间和其他属性

因为CSS转换是一种纯CSS，所以它们可以用于React应用程序、角度、纯Javascript，甚至是没有Javascript的老式服务器渲染页面

它不是最通用或最强大的技术。但是，既然在大多数情况下，我们想要的动画非常简单，为什么要寻找更复杂的东西，而一个简单的就可以了

CSS转换也是一个显著的例外，Opera Mini和IE版本低于10

CSS转换使我们能够在两个CSS状态之间设置动画。假设您想要设置打开和关闭抽屉的动画（通过单击按钮触发）。我们假设抽屉周围有一个容器。当抽屉打开时，我们希望它占据容器宽度的100%，因此其

最大宽度应为100%。关闭时，其宽度应为0。我们可以创建两种CSS样式：

/*此CSS样式在抽屉打开时应用*/
常量openedStyle={
maxWidth:'100%'/*抽屉打开时的最大值为100%*/，
};
/*此CSS样式在抽屉关闭时应用*/
常数closedStyle={
maxWidth:0/*关闭抽屉中的最大宽度为0*/，
};

然后我们处理打开/关闭事件，在打开/关闭时将其中一个类应用于抽屉对象：

类抽屉扩展React.Component{
状态={
已打开：false//最初搜索表单已关闭
};
toggleOpened=（）=>
//切换打开/关闭状态。
//因为我们依赖于前一个状态，所以我们需要使用
//函数集状态形式
// https://ozmoroz.com/2018/11/why-my-setstate-doesnt-work/
this.setState（state=>（{…state，opened:！state.opened}））；
render（）{
const{opened}=this.state；
返回(
{打开？'Close'：'Open'}
);
}
}
导出默认抽屉；

当我们按下“打开/关闭”按钮时，抽屉将在0和100%宽度之间翻转，有效地打开和关闭


我们现在所需要的就是给它制作动画

为此，我们需要一个秘密成分——CSS
transition
属性。我们只需在抽屉中添加以下样式：

/*此CSS样式在抽屉打开时应用*/
常量openedStyle={
maxWidth:'100%'/*抽屉打开时的最大值为100%*/，
/*在过渡到开放时，
为“最大宽度”设置动画0.5s*/
过渡：“最大宽度0.5s”
};
/*此CSS样式在抽屉关闭时应用*/
常数closedStyle={
maxWidth:0/*关闭抽屉中的最大宽度为0*/，
/*在过渡到关闭状态时，
为“最大宽度”设置动画0.5s*/
过渡：“最大宽度0.5s”
};

瞧！我们有了我们的动画-点击按钮，我们的抽屉现在在半秒内展开和折叠


简而言之，就是这样，但还有更多：


可以使用CSS转换设置多个CSS属性的动画
可以将延迟应用于可传递属性，即首先设置不透明度动画，然后在0.5秒延迟后设置同一元素宽度的动画
您可以将各种类型的应用于转换

我写了一篇扩展的博客文章，解释了以上所有内容：。
查看这个易于使用且受欢迎的软件包：


安装：

npm install react-transition-group

用法：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={toShow} // boolean value passed via state/props to either mount or unmount this component
  timeout={300}
  classNames='my-element' // IMP!
  unmountOnExit
>
  <ComponentToBeAnimated />
</CSSTransition>

就我个人而言，我更喜欢使用REF和香草css3制作动画。@DmitriyKovalenko谢谢你的意见！公告只说，
cstransitiongroup
不再由React团队维护，因此用户将无法在该repo中获得答案。但它仍然保持不变（新回购：）。我不确定你认为什么是“复杂的”，但是<代码> CSSTRANSIOTGROUP 允许你使用CSS（如此小的努力）来激活状态之间的转换。如果你想做更雄心勃勃的事情，也许它不合适。@OrB正如我所写的，它甚至不允许我使用延迟，因为enterTimeout和其他道具实际上不起作用。这是我面临的最简单的情况。
.my-element-enter {
  opacity: 0;
  transform: scale(0.9);
}
.my-element-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
  opacity: 1;
}
.my-element-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}