使用ES6时如何在反应组件中应用css？

Question

我想应用简单的fadeIn动画，似乎只有这样才能使用ReactCSSTransitionGroup使用css类。任何人都可以帮助，如何在es6中实现它。

我不确定在使用es6语法时如何将css类应用于我的react组件。感谢

Answer 1

  

我不确定在使用es6语法

时如何将css类应用于我的react组件

我假设您的意思是如何在转换期间修改类名，但是如果没有将className属性添加到组件元素中？您是否使用ES6完全无关紧要。在JSX中：

<div className="my-div"></div>

在JS中：

React.createElement('div', { className: 'my-div' })

  

想要应用简单的fadeIn动画，似乎只有通过使用使用css类的ReactCSSTransitionGroup。任何人都可以帮助，如何在es6中实现它。

ES6与CSS和CSS过渡组插件无关。

如果它只是淡入淡出，并且您的元素刚刚被引入DOM，那么您可能不需要CSS过渡组;如果可以，只需在类上使用CSS转换。

但React的问题，即CSS过渡解决的问题是，使用React，状态之间的动画不会像其他人那样工作（通常它们根本不起作用，因为DOM被摧毁和重建）。从字面上看，所有转换组（它只是一个通用的包装器组件）都会添加（最多）四个类，这些类在您指定的时间打开/关闭（.mycomponent-enter，.mycomponent-enter-active，{{1 }，.mycomponent-leave）。这允许您通过CSS应用动画。您根据API应用属性 - 需要为.mycomponent-leave-active否则React会尖叫你并且它不会工作，并且需要有时间设置进入和离开（否则就不能有任何动画，因为没有时间段。）

我不能给你更多的东西，因为你还没有指明任何你曾尝试过的东西。我只是想强调一下你描述这个的方式与ES6，甚至Javascript没有任何关系;如果你想纯粹使用JS那些不同的动画来应用动画。