1 files changed, 31 insertions, 5 deletions
diff --git a/src/main/scala/reading/component/widget/Modal.scala b/src/main/scala/reading/component/widget/Modal.scala
index fe10d1f..02c42be 100644
--- a/src/main/scala/reading/component/widget/Modal.scala
+++ b/src/main/scala/reading/component/widget/Modal.scala
@@ -1,24 +1,41 @@
 package reading.component.widget
 
-import rx._
-import Ctx.Owner.Unsafe._
+import scala.util.Random
 
-import scalatags.JsDom.all._
+import org.scalajs.dom.raw.HTMLElement
+import rx._
+import rx.Ctx.Owner.Unsafe._
 import scalacss.Defaults._
 import scalacss.ScalatagsCss._
+import scalatags.JsDom.all._
 
 import reading.component.widget.style.{ Modal => ModalStyle }
 import reading.utils.{ RxAttr }
 
 object Modal {
   def apply(onClose: => Unit)(content: HtmlTag): HtmlTag = {
+    val modalId = s"modal${Random.nextInt}"
+
+    Animate(
+      id = modalId,
+      duration = 300,
+      transition = Transition.easeOut,
+      animate = (progress, element) => {
+      element.style.opacity = s"$progress"
+      element.childNodes(2) match {
+        case e: HTMLElement => e.style.transform = s"translateY(${40 * (progress - 1)}px)"
+      }
+    }
+    )
+
     div(
       ModalStyle.render,
       ModalStyle.modal,
+      id := modalId,
 
       div(
         ModalStyle.curtain,
-        RxAttr(onclick, Rx(() => onClose))
+        RxAttr(onclick, Rx(() => close(modalId, onClose)))
       ),
 
       div(
@@ -26,10 +43,19 @@ object Modal {
         content,
         button(
           ModalStyle.close,
-          RxAttr(onclick, Rx(() => onClose)),
+          RxAttr(onclick, Rx(() => close(modalId, onClose))),
           "Fermer"
         )
       )
     )
   }
+
+  private def close(modalId: String, onClose: => Unit): Unit =
+    Animate(
+      id = modalId,
+      duration = 300,
+      transition = Transition.linear,
+      onEnd = onClose,
+      animate = (progress, element) => element.style.opacity = s"${1 - progress}"
+    )
 }