fix: ∆

Pearson-Higher-Ed · Jan 27, 2017 · c081b20 · c081b20
1 parent 6be9f91
commit c081b20
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 30 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -79,6 +79,7 @@ <h3>Alerts Event API</h3>
             document.body.dispatchEvent(new CustomEvent('triggerAlert', {
                 "detail":{
                   "alertList":[{
+                    "id"          : new Date().getTime(),
                     "alertType"   : type,
                     "alertMessage": type + ' test message'
                   }]

diff --git a/src/js/AlertList.js b/src/js/AlertList.js
@@ -22,9 +22,9 @@ class AlertList extends Component {
   render () {
     console.log(this.state.e)
     return (
-      <ul className="alertList" >
+      <ReactCSSTransitionGroup transitionName="transition" transitionEnterTimeout={500} transitionLeaveTimeout={800} className="alertList" >
         {this.renderAlert(this.state.alertList)}
-      </ul>
+      </ReactCSSTransitionGroup>
     )
   }
 
@@ -42,7 +42,7 @@ function _handleClose (closeIndex) {
 function _renderAlert (alertList) {
   return alertList.map((alert, index) =>
     <Alert
-      key          = {index}
+      key          = {alert.id}
       index        = {index}
       alertType    = {alert.alertType}
       alertMessage = {alert.alertMessage}

diff --git a/src/scss/component-specific.scss b/src/scss/component-specific.scss
@@ -4,8 +4,8 @@
   position:relative;
   margin-top: 30px;
   list-style:none;
-  animation-name: openAlert;
-  animation-duration: 0.3s;
+  //animation-name: openAlert;
+  //animation-duration: 0.3s;
   background-color: #ffffff;
   padding: $alert-padding;
 }
@@ -32,10 +32,10 @@ svg {
   width: 0;
 }
 
-@keyframes openAlert {
-  0% { top: -700px; }
-  100% { top: 0px; }
-}
+//@keyframes openAlert {
+//  0% { top: -700px; }
+//  100% { top: 0px; }
+//}
 
 .error-title {
   color: #db0020;
@@ -62,39 +62,37 @@ svg {
   list-style:none;
   background-color: #ffffff;
   padding: $alert-padding;
-  animation-name: closeAlert;
-  animation-duration: 1.2s;
+  //animation-name: closeAlert;
+  //animation-duration: 1.2s;
 }
 
-@keyframes closeAlert {
-  0% { right: 0px;}
-  100% { right: 1500px;}
-}
+//@keyframes closeAlert {
+//  0% { right: 0px;}
+//  100% { right: 1500px;}
+//}
 
 
 //=========================================
 
-//.transition-enter {
-//  transform:   translate(0,-250px);
-//  transform: translate3d(0,-250px,0);
-//}
-//.transition-enter.transition-enter-active {
-//	transform:   translate(0,0);
-//	transform: translate3d(0,0,0);
-//	transition-property: transform;
-//	transition-duration: 300ms;
-//	transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
-//}
+.transition-enter {
+  transform:   translate(0,-250px);
+  transform: translate3d(0,-250px,0);
+}
+.transition-enter.transition-enter-active {
+	transform:   translate(0,0);
+	transform: translate3d(0,0,0);
+	transition-property: transform;
+	transition-duration: 300ms;
+	transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
+}
 .transition-leave {
-  opacity:0;
 	transform:   translate(0,0,0);
 	transform: translate3d(0,0,0);
-  transition-property: transform, opacity;
-	transition-duration: 2800ms;
+  transition-property: transform;
+	transition-duration: 800ms;
 	transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
 }
 .transition-leave.transition-leave-active {
-  opacity: 0;
 	transform:   translate(-1450px,0);
 	transform: translate3d(-1450px,0,0);
 }