Animating Page Transitions with Reagent and Re-frame

page-transitions.cljs

;; style.css  -- basic (lame) transitions, for demonstration
;;________________________________________________________________

.pageChange-enter {
  opacity: 0.01;
}

.pageChange-enter.pageChange-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.pageChange-leave {
  opacity: 1;
}

.pageChange-leave.pageChange-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}


;; (ns *.core)
;; _________________________________________________________________

(ns myapp.core
  (:require [reagent.core :as reagent :refer [atom]]
              [reagent.session :as session]
              [secretary.core :as secretary :include-macros true]
              [accountant.core :as accountant]
              [re-frame.core :refer [register-handler
                                     path
                                     register-sub
                                     dispatch
                                     dispatch-sync
                                     subscribe]]
              [myapp.handlers]
              [myapp.subscriptions]
              [myapp.database]
              [myapp.views :refer [current-page]]
            ))

(secretary/defroute "/" []
    (dispatch [:set-current-page :home-page]))

(secretary/defroute "/about" []
    (dispatch [:set-current-page :about-page]))

(defn mount-root []
  (reagent/render [current-page] (.getElementById js/document "app")))

(defn init! []
  (accountant/configure-navigation!)
  (accountant/dispatch-current!)
  (dispatch-sync [:initialize])
  (mount-root))

(init!)

;; (ns *.views)
;; _______________________________________________________________

(ns myapp.views
  (:require [reagent.core :as reagent :refer [atom]]
            [reagent.session :as session]
            [secretary.core :as secretary :include-macros true]
            [accountant.core :as accountant]
            [re-frame.core :refer [dispatch
                                   subscribe]]))

(def css-transition-group
  (reagent/adapt-react-class js/React.addons.CSSTransitionGroup))

(defn no-page []
  [:div])

(defn home-page []
  [:div.HomePage
   [:h2 "Welcome Home"]
   [:a {:href "/about"} "go to about page"]])

(defn about-page []
  [:div.AboutPage
   [:h2 "About"]
   [:a {:href "/"} "go to the home page"]])

(defn current-page []
  (let [cp         (subscribe [ :current-page ])
        routes-map (subscribe [ :routes ])]
    (fn []
      [:div
        [css-transition-group {:transition-name "pageChange"
                              :component "div"}

         ^{:key @cp}
          [(@routes-map @cp)]]]
      )))

;; (ns *.database)
;; _______________________________________________________

(ns myapp.database
  (:require
    [myapp.views :refer [home-page
                         about-page
                         no-page]]))

        ;; Note:  You must initialize the current page
        
(def initial-state
  {:routes  {:home-page  #'home-page
             :about-page #'about-page
             :no-page    #'no-page}

   :current-page :no-page
   }
  )

;; (ns *.handlers)
;; _________________________________________________________

(ns myapp.handlers
  (:require-macros [reagent.ratom :refer [reaction]])
  (:require [reagent.core :as reagent :refer [atom]]
            [re-frame.core :refer [register-handler]]))

(register-handler                 
  :initialize                     
  (fn
    [db _]
    (merge db initial-state)))

(register-handler
  :set-current-page
  (fn
    [db [_ page]]
     (assoc db :current-page page)))
   
;; (ns *.subscriptions)
;; __________________________________________________________

(ns myapp.subscriptions
  (:require-macros [reagent.ratom :refer [reaction]])
  (:require [reagent.core :as reagent :refer [atom]]
            [re-frame.core :refer [register-sub]]))

(register-sub
  :current-page
  (fn [db _]
    (reaction (:current-page @db))))

(register-sub
  :routes
  (fn [db _]
    (reaction (:routes @db))))
  

Hi, is this working for reagent version 0.8.1?