From db6517158faa67203d4715a3afa1ff011b666eef Mon Sep 17 00:00:00 2001
From: Luka Vandervelden <lukc@upyum.com>
Date: Wed, 25 Dec 2019 01:27:20 +0100
Subject: [PATCH] maquette css transitions.

---
 client/style.sass | 16 ++++++++++++++++
 client/task.ls    | 15 ++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/client/style.sass b/client/style.sass
index 6296382..54d6e74 100644
--- a/client/style.sass
+++ b/client/style.sass
@@ -116,3 +116,19 @@
   top: 0
   bottom: 0
 
+.fade-in
+  -webkit-transition: 0.33s ease-out opacity;
+  transition: 0.33s ease-out opacity;
+  opacity: 0;
+
+.fade-in.fade-in-active
+  opacity: 1;
+
+.fade-out
+  -webkit-transition: 0.33s ease-out opacity;
+  transition: 0.33s ease-out opacity;
+  opacity: 1;
+
+.fade-out.fade-out-active
+  opacity: 0;
+
diff --git a/client/task.ls b/client/task.ls
index 1a45c47..e9e548d 100644
--- a/client/task.ls
+++ b/client/task.ls
@@ -3,6 +3,9 @@ nmd   = require "nano-markdown"
 TaskCreationModal = require './task-creation-modal.ls'
 TaskRemovalModal = require './task-removal-modal.ls'
 
+maquette-css-transitions = require "maquette-css-transitions"
+{create-exit-css-transition, create-enter-css-transition} = maquette-css-transitions
+
 {media, title} = require "./bulma.ls"
 {icon} = require "./font-awesome.ls"
 
@@ -61,9 +64,15 @@ Task = (self, project, todod-ws, users-cache) ->
 				if args.is-selected && self.description.length > 0
 					h \div.content {
 						key: "task-description-#{self.id}"
-						after-create: (dom) ->
-							dom.innerHTML = nmd self.description
-					} [ ]
+						enter-animation: create-enter-css-transition \fade-in
+						exit-animation:  create-exit-css-transition \fade-out
+					} [
+						# FIXME: It may be more efficient to keep the cached markdown.
+						h \div.description {
+							after-create: (dom) ->
+								dom.innerHTML = nmd self.description
+						}
+					]
 			]
 
 			if modal