Welcome aboard! We are happy you are here and wish you good net-raft!
// at first you install "install react-css-transition --save"
import * as React from "react";
import ReactDOM from 'react-dom';
import { CSSTransition, transit } from 'react-css-transition';
const transitionStyles = {
defaultStyle: {
transform: "translate(0, 0)",
},
enterStyle: {
transform: transit("translate(175px, 0)", 500, "ease-in-out"),
},
leaveStyle: {
transform: transit("translate(0, 0)", 500, "ease-in-out"),
},
activeStyle: {
transform: "translate(175px, 0)",
},
};
const circleStyle = {
boxShadow: "1px 1px 5px 0px rgba(0,0,0,0.25)",
borderRadius: "50%",
marginBottom: "32px",
background: "blue",
height: "20px",
width: "20px",
marginRight: "8px",
};
const Circle = () => <div style={ circleStyle } />;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {active: false};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({active: !this.state.active});
}
render() {
return (
<div>
<CSSTransition {...transitionStyles} active={this.state.active}>
<Circle />
</CSSTransition>
<button onClick={this.handleClick}>Click</button>
</div>
);
}
}
export default App;
The most helpful REACT solutions
How to get client ip address using react ?REACT Click to see more ... 19.2K 421