From db6517158faa67203d4715a3afa1ff011b666eef Mon Sep 17 00:00:00 2001 From: Luka Vandervelden 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