fix: ∆

demo/index.html

@@ -53,7 +53,7 @@ <h3>Alerts Event API</h3>
       <br />
       <br />
       <br />
-      <button class="target pe-btn_cta--btn_xlarge" onclick="buttonHandler('clear')">Clear Alert</button>
+      <button class="target pe-btn__cta--btn_xlarge" onclick="buttonHandler('clear')">Clear Alert</button>
     </div>
 
 

src/js/AlertList.js

@@ -10,9 +10,7 @@ class AlertList extends Component {
     super(props);
 
     this.state = {
-
-      alertList    : [],
-      dismissAlert : ''
+      alertList : []
     };
 
     this.renderAlert = _renderAlert.bind(this);
@@ -56,31 +54,53 @@ export default AlertList;
 function _handleClose (currentIndex) {
 
   this.setState({
-    dismissAlert : 'close-title-animation',
-    alertList:this.state.alertList.filter((e, index, a) => a[index] !== a[currentIndex])
+    dismissAlert      : 'close-title-animation',
+    currentCloseIndex : currentIndex
   });
 
 }
 
 
-
 function _renderAlert (alertList) {
 
   const alertsToRender = [];
 
   alertList.forEach((alert, index) => {
-    alertsToRender.push(
-        <Alert
-          index        = {index}
-          key          = {index}
-          alertType    = {alert.alertType}
-          alertMessage = {alert.alertMessage}
-          dismissAlert = {this.state.dismissAlert}
-          handleClose  = {this.handleClose}
-        />
+
+    if (this.state.currentCloseIndex === index) {
+
+      alertsToRender.push(
+          <Alert
+            index        = {index}
+            key          = {index}
+            alertType    = {alert.alertType}
+            alertMessage = {alert.alertMessage}
+            dismissAlert = {this.state.dismissAlert}
+            handleClose  = {this.handleClose}
+          />
+      )
+
+    } else {
+
+      alertsToRender.push(
+          <Alert
+            index        = {index}
+            key          = {index}
+            alertType    = {alert.alertType}
+            alertMessage = {alert.alertMessage}
+            dismissAlert = ""
+            handleClose  = {this.handleClose}
+          />
       )
+    }
+
+
+
   })
 
+  this.state.dismissAlert = '';
+  // this.state.alertList = this.state.alertList.filter((e, index, a) => a[index] !== a[this.state.currentCloseIndex])
+
   return alertsToRender;
 
 }

src/scss/component-specific.scss

@@ -33,7 +33,7 @@ svg {
 }
 
 @keyframes openAlert {
-  0% { top: -200px; }
+  0% { top: -500px; }
   100% { top: 0px; }
 }
 
@@ -58,10 +58,10 @@ svg {
 
 .close-title-animation {
   animation-name: closeAlert;
-  animation-duration: 3.2s;
+  animation-duration: 1.2s;
 }
 
 @keyframes closeAlert {
-  0% {}
-  100% { left: 1510px; }
+  0% { right: 0px;}
+  100% { right: 1500px; }
 }