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.
