adds animation

package.json

@@ -12,6 +12,7 @@
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
     "react-test-renderer": "^16.4.1",
+    "react-transition-group": "1.x",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "reselect": "^3.0.1"

src/components/InventoryList/InventoryList.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import Item from "../../container/ItemContainer/ItemContainer";
 import { Filter } from "../Filter/Filter";
 import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
+import { CSSTransitionGroup } from 'react-transition-group' // ES6
+import '../../css/animations.css'
 
 const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
     <Container>
@@ -13,12 +15,20 @@ const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
                     <CardBody>
                         <Filter filterTerm={filterTerm} updateFilter={updateFilter} />
                         <ListGroup>
+                        <CSSTransitionGroup
+                            transitionName="example"
+                            transitionAppear={true}
+                            transitionAppearTimeout={600}
+                            transitionEnterTimeout={450}
+                            transitionLeaveTimeout={350}>
                             {items.map(item =>
                                 <Item
                                     key={item.id}
                                     {...item}
                                 />
                             )}
+
+                        </CSSTransitionGroup>
                         </ListGroup>
                     </CardBody>
                 </Card>

src/components/InventoryList/__snapshots__/InventoryList.test.js.snap

@@ -21,7 +21,9 @@ exports[`InventoryList should render as expected 1`] = `
           />
           <ul
             className="list-group"
-          />
+          >
+            <span />
+          </ul>
         </div>
       </div>
     </div>

src/container/ItemContainer/ItemContainer.js

@@ -7,7 +7,7 @@ const getItem = (state, props) => state.items.find(item => item.id === props.id)
 
 const getItemQuantity = createSelector(
   [getItem],
-  (item) => item.quantity
+  (item) => item !== undefined ? item.quantity : 0
 )
 
 const mapStateToProps = (state, props) => ({

src/css/animations.css

+.example-enter {
+    opacity: 0.01;
+}
+
+.example-enter.example-enter-active {
+    opacity: 1;
+    transition: opacity 450ms ease-in;
+}
+
+.example-leave {
+    opacity: 1;
+}
+
+.example-leave.example-leave-active {
+    opacity: 0.01;
+    transition: opacity 350ms ease-in;
+}
+
+.example-appear {
+    opacity: 0.01;
+}
+
+.example-appear.example-appear-active {
+    opacity: 1;
+    transition: opacity 600ms ease-in;
+}
\ No newline at end of file

src/index.css

-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}

yarn.lock

@@ -6529,7 +6529,7 @@ react-toastify@^3.2.2:
     prop-types "^15.6.0"
     react-transition-group "^2.2.1"
 
-react-transition-group@^1.2.0, react-transition-group@^1.2.1:
+react-transition-group@1.x, react-transition-group@^1.2.0, react-transition-group@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
   dependencies: