Add transition effect to TransactionListItemDetails expander

ui/app/components/transaction-list-item/index.scss

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  background: $white;
 
   &__grid {
     cursor: pointer;
@@ -117,4 +118,14 @@
     background: #f3f4f7;
     width: 100%;
   }
+
+  &__expander {
+    max-height: 0px;
+    width: 100%;
+
+    &--show {
+      max-height: 1000px;
+      transition: max-height 300ms ease-out;
+    }
+  }
 }

ui/app/components/transaction-list-item/transaction-list-item.component.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Identicon from '../identicon'
 import TransactionStatus from '../transaction-status'
 import TransactionAction from '../transaction-action'
@@ -176,6 +177,9 @@ export default class TransactionListItem extends PureComponent {
           { this.renderPrimaryCurrency() }
           { this.renderSecondaryCurrency() }
         </div>
+        <div className={classnames('transaction-list-item__expander', {
+          'transaction-list-item__expander--show': showTransactionDetails,
+        })}>
           {
             showTransactionDetails && (
               <div className="transaction-list-item__details-container">
@@ -190,6 +194,7 @@ export default class TransactionListItem extends PureComponent {
             )
           }
         </div>
+      </div>
     )
   }
 }