Thank you Jack for this question and later example, it certainly helps a
newcomer like me :)
Dmitry.
On Sunday, March 16, 2014 11:39:33 PM UTC+4, 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.
