Wow, thank you for posting your solution after the fact, instead of doing this:
http://imgs.xkcd.com/comics/wisdom_of_the_ancients.png On Sunday, March 16, 2014 2:39:33 PM UTC-5, Jack Schaedler wrote: > Hi David, > > > > Thanks for the quick response! Seems to be working just fine now. I must have > screwed up something simple when I initially tried it yesterday. > > > > > > For posterity: > > > > 1) Access the CSSTransitionGroup from cljs: > > (def css-trans-group (-> js/React (aget "addons") (aget > "CSSTransitionGroup"))) > > > > 2) Wrap your elements in a css-trans-group just like you would a dom/div or > dom/ul or whatever: > > > > (om/root > > (fn [app owner] > > (apply css-trans-group #js {:className "my-class-name" :transitionName > "example"} > > (map (fn [text] (dom/li nil text)) (:list app)))) > > app-state > > {:target (. js/document (getElementById "app0"))}) > > > > 3) Adhere to the naming convention for transition classes in your css (noting > use of 'example' above): > > > > .example-enter { > > opacity: 0.01; > > transition: opacity .5s ease-in; > > } > > > > .example-enter.example-enter-active { > > opacity: 1; > > } > > > > > > .example-leave { > > opacity: 1; > > transition: opacity .5s ease-in; > > } > > > > .example-leave.example-leave-active { > > opacity: 0.01; > > } > > > > > > Best, > > -jack > > > > > > On Saturday, March 15, 2014 5:20:07 PM UTC+1, David Nolen wrote: > > > Several people have successfully used the CSS transition group add on, > > hopefully they can chime in. > > > > > > On Saturday, March 15, 2014, Jack Schaedler <[email protected]> wrote: > > > > > > Hi David, > > > > > > > > > > > > Thanks heaps for all of your tutorials and work on Om. I've got a nice > > little clojurescript app with full undo/redo working with Om thanks to your > > tutorials and blog posts, and my goal for today is to work on animations. > > > > > > > > > > > > > > > As an alternative to the interval within IWillMount, has anyone > > successfully used the ReactCSSTransitionGroup > > (http://facebook.github.io/react/docs/animation.html) addon within Om? I'm > > a newcomer to both cljs and React, and I've unsuccessfully attempted to do > > something like: > > > > > > > > > > > > > > > (def css-trans-group (-> js/React (aget "addons") (aget > > "CSSTransitionGroup"))) > > > > > > > > > > > > (defn my-component [app owner] > > > > > > (reify > > > > > > om/IRender > > > > > > (render [this] > > > > > > (css-trans-group #js {:transitionName "example"} > > > > > > (apply dom/div nil > > > > > > (om/build-all palette-entry-component palette)))))) > > > > > > > > > > > > Is this sort of approach reasonable within Om? Sorry in advance for the > > probably silly question! > > > > > > > > > > > > -jack > > > > > > > > > > > > > > > > > > > > > > > > On Saturday, March 8, 2014 3:08:52 AM UTC+1, David Nolen wrote: > > > > > > > I would probably do this by hooking into IWillUpdate. Generally whatever > > > solution makes sense for React will make sense for Om. > > > > > > > > > > > > > > > > > > > > > David > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > On Fri, Mar 7, 2014 at 8:35 PM, <[email protected]> wrote: > > > > > > > > > > > > > > Hi Everyone, > > > > > > > > > > > > > > > > > > > > > > > > > > > > I have an application state > > > > > > > > > > > > > > > > > > > > > > > > > > > > (def app-state (atom {:index 0 :some-list [1 2 3 4]})) > > > > > > > > > > > > > > > > > > > > > > > > > > > > When next button is clicked, index is incremented and the corresponding > > > item from the :some-list is displayed. Now I want to introduce an > > > animation/effect during the transition from one item to another. How > > > should I go about it in Om ? > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > regards > > > > > > > > > > > > > > > > > > > > > > > > > > > > -- > > > > > > > > > > > > > > Note that posts from new members are moderated - please be patient with > > > your first post. > > > > > > > > > > > > > > --- > > > > > > > > > > > > > > You received this message because you are subscribed to the Google Groups > > > "ClojureScript" group. > > > > > > > > > > > > > > To unsubscribe from this group and stop receiving emails from it, send an > > > email to [email protected]. > > > > > > > > > > > > > > > > > To post to this group, send email to [email protected]. > > > > > > > > > > > > > > Visit this group at http://groups.google.com/group/clojurescript. > > > > > > > > > > > > -- > > > > > > Note that posts from new members are moderated - please be patient with > > your first post. > > > > > > --- > > > > > > You received this message because you are subscribed to the Google Groups > > "ClojureScript" group. > > > > > > To unsubscribe from this group and stop receiving emails from it, send an > > email to [email protected]. > > > > > > > > > To post to this group, send email to [email protected]. > > > > > > Visit this group at http://groups.google.com/group/clojurescript. -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/clojurescript.
