fix: ∆

main.js

@@ -18,7 +18,7 @@ export default class AlertsComponent {
 
     ReactDOM.render(
       <IntlProvider locale={locale}>
-          <AlertList data={config} />
+          <AlertList />
       </IntlProvider>,
       document.getElementById(config.elementId)
     );

src/js/AlertList.js

@@ -10,7 +10,8 @@ class AlertList extends Component {
     super(props);
 
     this.state = {
-      alertList : [],
+
+      alertList    : [],
       dismissAlert : ''
     };
 
@@ -31,6 +32,11 @@ class AlertList extends Component {
   }
 
 
+  // componentWillUnmount() {
+  //   this.setState({alertList:this.state.alertList.filter((e, index, a) => a[index] !== a[this.state.currentIndex])})
+  // }
+
+
   render () {
 
     const { alertList } = this.state;
@@ -49,11 +55,9 @@ export default AlertList;
 
 function _handleClose (currentIndex) {
 
-  const { alertList } = this.state;
-
   this.setState({
     dismissAlert : 'close-title-animation',
-    alertList    : alertList.filter((e, index, a) => a[index] !== a[currentIndex])
+    alertList:this.state.alertList.filter((e, index, a) => a[index] !== a[currentIndex])
   });
 
 }

src/scss/component-specific.scss

@@ -1,6 +1,7 @@
 @import './variables';
 
 .pe-alert {
+  position:relative;
   margin-top: 30px;
   list-style:none;
   animation-name: openAlert;
@@ -32,7 +33,7 @@ svg {
 }
 
 @keyframes openAlert {
-  0% { top: 200px; }
+  0% { top: -200px; }
   100% { top: 0px; }
 }
 
@@ -57,10 +58,10 @@ svg {
 
 .close-title-animation {
   animation-name: closeAlert;
-  animation-duration: .2s;
+  animation-duration: 3.2s;
 }
 
 @keyframes closeAlert {
   0% {}
-  100% { left: -510px; }
+  100% { left: 1510px; }
 }