淡入淡出另一个组件React.js

我刚刚开始使用React.js并使自己更容易我试图重新创建过去的项目，而不是像过去一样使用jQuery，我完全避免了jQuery，只使用了React。淡入淡出另一个组件React.js

我倾向于做动画，其中一个div会淡入另一个像这样淡出：

$("#start").click(function() { 
    $("#h1").fadeOut(750); 
    $("#h2").delay(500).fadeIn(750); 
    $("#h1").css("z-index", 0); 
    $("#h2").css("z-index", 1); 
});

我想知道我怎么可以和出来的效果重现此褪色没有jQuery的

（我知道CSS动画可以改变不透明度，但不透明度不是我试图改变的唯一东西，这也会影响显示属性）。

来源

2017-09-11 KevTLW

一种选择是使用一个框架，比如react-bootstrap，它包含许多您需要的任何给定项目的UI组件。它包含一个Fade组件。文档可以在这里找到：https://react-bootstrap.github.io/components.html#utilities

class Example extends React.Component { 

constructor(...args) { 
    super(...args); 
    this.state = {}; 
} 

render() { 
    return (
    <div> 
     <Button onClick={()=> this.setState({ open: !this.state.open })}> 
     click 
     </Button> 
     <Fade in={this.state.open}> 
     <div> 
      THIS CONTENT WILL FADE 
      </Well> 
     </div> 
     </Fade> 
    </div> 
); 
} 
} 

ReactDOM.render(<Example/>, mountNode);

来源

2017-09-11 02:13:11 ReLeaf

一个简单的方法是使用CSS过渡。基本上你只需要添加一个类的元素，并定义的CSS的过渡，并没有休息为您

这里有一个教程

https://www.w3schools.com/css/css3_transitions.asp

这很好地解释了如何的好工作这一切与工程实例和一个操场，您可以尝试自己

来源

2017-09-11 02:21:41 Mikkel

的CSS Transition group add-on可能有帮助，它让你定义的转换是这样的：

JS：

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300}> 
    {items} 
</ReactCSSTransitionGroup>

CSS：

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
}

来源

2017-09-11 04:35:14 Louis

淡入淡出另一个组件React.js

回答

相关问题