maquette css transitions.

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;
+

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) ->
+						enter-animation: create-enter-css-transition \fade-in
-							dom.innerHTML = nmd self.description
+						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