add limitation of animations

Author: The-manpreet-singh

package.json

@@ -12,5 +12,17 @@
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
  }
 }

src/App.js

@@ -23,11 +23,8 @@ class App extends Component {
  return (
  <div className="App">
  <h1>React Animations</h1>
- <Modal 
- show={this.state.modalIsOpen}
- closed={this.closeModal}
- />
- <Backdrop show={this.state.modalIsOpen} />
+ {this.state.modalIsOpen ? <Modal show={this.state.modalIsOpen} closed={this.closeModal}/> : null }
+ {this.state.modalIsOpen ? <Backdrop show={this.state.modalIsOpen} /> : null }
  <button className="Button" onClick={this.showModal}>Open Modal</button>
  <h3>Animating Lists</h3>
  <List />

src/components/Modal/Modal.css

@@ -14,12 +14,12 @@
 }
 
 .ModalOpen {
- visibility: visible;
+ /* visibility: visible; */
  animation: openModal 0.4s ease-out forwards ; 
 }
 
 .ModalClosed {
- visibility: hidden;
+ /* visibility: hidden; */
  animation: closeModal 0.4s ease-out forwards ;
 }