React.js设置CSS属性（类似于setState）
布伦特
在React.js中，如何显式设置CSS？
这里是上下文：
我有一个从全高开始的栏，然后一直（通过动画）缩小高度，一直到0px。参见下图。
在步骤1-2-3中它可以正常工作。我应用动画将高度设置为0。
但是，我无法从步骤3过渡到步骤4，因为高度已经为0。（与步骤1不同，高度为初始值700px）。
如何显式设置CSS？这将使我恢复初始的700px高度，从而可以正确重置动画。
注意：出于性能原因，我不使用jQuery。
范可夫里贾
您可以使用componentDidUpdate和componentDidMount方法以及对div的引用来显式设置div的CSS属性，如下所示：
endAnimation () {
setTimeout(()=>{
this.refs.animatedDiv.className = "newClassToReset"
}, this.animationLength);
},
componentDidMout (){
this.endAnimation();
},
componentDidUpdate (){
this.endAnimation
}
但是，如果您使用CSS进行动画制作，最好使用官方的ReactCSSTransitionGroups插件，该插件位于：https ://facebook.github.io/react/docs/animation.html
设置起来真的很容易，在您的示例中将是这样的：
<ReactCSSTransitionGroup transitionName="shrink" transitionAppear={true} transitionAppearTimeout={500}>
<div className="bar">Bar</div>
</ReactCSSTransitionGroup>
然后在CSS文件中提供以下类：
.shrink-appear {
height: 700px;
}
.shrink-appear.shrink-appear-active {
height: 0;
transition: height 500ms ease-in;
}
过渡组的工作方式是，首先将类“收缩出现”添加到需要动画的元素中，然后再添加“收缩出现激活”类，因为我们的transitionName是“收缩”。
如果要制作离开动画，只需向过渡组提供transitionLeaveTimeout并定义2个新类即可，在我们的示例中，这些类将是：
.shrink-leave {
height: 0;
}
.shrink-leave.shrink-leave-active {
opacity: 700;
transition: height 500ms ease-in;
}
如您所见，请假动画类与我们出现的动画相反，以提供相反的效果。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
React.js：setState覆盖，不合并
- 2
react.js中的onDomReady类似事件
- 3
React JS setState（{dict：dict}）
- 4
类似于Regex的CSS属性选择器通配符捕获
- 5
React：根据状态设置禁用的属性
- 6
React Native类似于React的.map吗？
- 7
数组值上的setState React.js
- 8
没有React的类似React的编程
- 9
React-具有类似于Chrome / Firefox JS控制台的控制台的组件或方式
- 10
React-Admin AutocompleteInput中是否有类似于Material-UI Autocomplete freeSolo的东西
- 11
React JS中MaterialUI的怪异setState行为
- 12
React，JS-setState（）的最佳做法
- 13
在React Js中设置状态
- 14
React JS中最强大的setState方法
- 15
在危险地设置InnerHtml或类似中添加React组件
- 16
设置值以声明React js
- 17
无法使用React Spring设置THREE.js属性的动画
- 18
React.js setState问题
- 19
使用setState无法在React JS中更新对象的特定属性
- 20
React-通过setState设置对象的属性
- 21
React-具有类似于Chrome / Firefox JS控制台的控制台的组件或方式
- 22
使用React设置对象属性的样式
- 23
如何在realm-react-native中创建嵌套的类似于文件夹的结构？
- 24
React JS：从 React.createClass 更新时无法读取未定义的属性“setState”
- 25
React setState 不是设置状态
- 26
React setState 不设置状态
- 27
React JS：无法读取属性
- 28
React Navigation 导航的工作方式类似于 goBack
- 29
如何在 AngularJS 中实现组件组合（类似于 React 渲染道具模式）？
我来说两句