From 6191a4c0bc0105efcabd96ed8eee12ee7d3d85eb Mon Sep 17 00:00:00 2001 From: Dan Holmsand Date: Tue, 17 Dec 2013 22:25:11 +0100 Subject: [PATCH] Add some animation to todomvc --- Makefile | 2 +- examples/simple/project.clj | 4 ++-- examples/todomvc/project.clj | 4 ++-- examples/todomvc/src/todomvc.cljs | 16 +++++++++++----- examples/todomvc/todomvc.html | 1 + examples/todomvc/todosanim.css | 20 ++++++++++++++++++++ project.clj | 2 +- site/test.html | 4 ++++ test/runtests.cljs | 2 +- 9 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 examples/todomvc/todosanim.css diff --git a/Makefile b/Makefile index 6387301..635e15f 100644 --- a/Makefile +++ b/Makefile @@ -9,7 +9,7 @@ PROF = dev,test CLJSBUILD = client CLJSDIRS = src test -VERSION = 0.0.2 # -SNAPSHOT +VERSION = 0.0.3-SNAPSHOT all: buildrun diff --git a/examples/simple/project.clj b/examples/simple/project.clj index 63f906e..e84a43f 100644 --- a/examples/simple/project.clj +++ b/examples/simple/project.clj @@ -1,9 +1,9 @@ -(defproject simple-cloact "0.0.2" +(defproject simple-cloact "0.0.3-SNAPSHOT" :dependencies [[org.clojure/clojure "1.5.1"] [org.clojure/clojurescript "0.0-2120"] - [cloact "0.0.2"]] + [cloact "0.0.3-SNAPSHOT"]] :plugins [[lein-cljsbuild "1.0.1"]] :hooks [leiningen.cljsbuild] :profiles {:prod {:cljsbuild diff --git a/examples/todomvc/project.clj b/examples/todomvc/project.clj index 7e68477..a3f8c0f 100644 --- a/examples/todomvc/project.clj +++ b/examples/todomvc/project.clj @@ -1,9 +1,9 @@ -(defproject todomvc-cloact "0.0.2" +(defproject todomvc-cloact "0.0.3-SNAPSHOT" :dependencies [[org.clojure/clojure "1.5.1"] [org.clojure/clojurescript "0.0-2120"] - [cloact "0.0.2"]] + [cloact "0.0.3-SNAPSHOT"]] :plugins [[lein-cljsbuild "1.0.1"]] :hooks [leiningen.cljsbuild] :profiles {:prod {:cljsbuild diff --git a/examples/todomvc/src/todomvc.cljs b/examples/todomvc/src/todomvc.cljs index db75e84..bd8a900 100644 --- a/examples/todomvc/src/todomvc.cljs +++ b/examples/todomvc/src/todomvc.cljs @@ -54,6 +54,11 @@ [:button#clear-completed {:on-click clear} "Clear completed " done])]))) +(defn animation [props this] + (let [TransitionGroup cloact/React.addons.TransitionGroup] + [TransitionGroup {:transitionName (:name props)} + (cloact/children this)])) + (def counter (atom 0)) (defn add-todo [todos text] @@ -95,11 +100,12 @@ (pos? active))}] [:label {:for "toggle-all"} "Mark all as complete"] [:ul#todo-list - (for [{id :id :as todo} (filter pred items)] - [todo-item {:key id :todo todo - :on-save (partial save todos id) - :on-toggle (partial toggle todos id) - :on-destroy (partial delete todos id)}])]] + [animation {:name "todoitem"} + (for [{id :id :as todo} (filter pred items)] + [todo-item {:key id :todo todo + :on-save (partial save todos id) + :on-toggle (partial toggle todos id) + :on-destroy (partial delete todos id)}])]]] [:footer#footer [todo-stats {:active active :done done :filter filt :clear (partial clear-done todos)}]] diff --git a/examples/todomvc/todomvc.html b/examples/todomvc/todomvc.html index 891af44..50c4ebd 100644 --- a/examples/todomvc/todomvc.html +++ b/examples/todomvc/todomvc.html @@ -4,6 +4,7 @@ todomvc with cloact +

This will become todomvc when the ClojureScript is compiled

diff --git a/examples/todomvc/todosanim.css b/examples/todomvc/todosanim.css new file mode 100644 index 0000000..2252bc3 --- /dev/null +++ b/examples/todomvc/todosanim.css @@ -0,0 +1,20 @@ + +.todoitem-enter { + opacity: 0.01; + transition: opacity .2s ease-in; +} + +.todoitem-enter.todoitem-enter-active { + opacity: 1; +} + +.todoitem-leave { + opacity: 0.3; + max-height: 58px; + transition: opacity 0.1s ease-in, max-height 0.2s ease-out; +} + +.todoitem-leave.todoitem-leave-active { + opacity: 0.01; + max-height: 1px; +} diff --git a/project.clj b/project.clj index 497299f..22abbdb 100644 --- a/project.clj +++ b/project.clj @@ -1,6 +1,6 @@ -(defproject cloact "0.0.2" +(defproject cloact "0.0.3-SNAPSHOT" :dependencies [[org.clojure/clojure "1.5.1"] [org.clojure/clojurescript "0.0-2120"]] :plugins [[lein-cljsbuild "1.0.1"]] diff --git a/site/test.html b/site/test.html index 1d94452..0e88d5c 100644 --- a/site/test.html +++ b/site/test.html @@ -3,7 +3,11 @@ Testing cloact + +

This will become an example when compiled

diff --git a/test/runtests.cljs b/test/runtests.cljs index 7d28b30..6e0a296 100644 --- a/test/runtests.cljs +++ b/test/runtests.cljs @@ -35,7 +35,7 @@ (defn examples [] (let [p {:style {:color "#aaa"}}] - [:div + [:div.runtests [:div [:h2 p "Test results:"] [test-output]]