How to add smooth page transitions when using meteor and react?

help
1

I just want to add smooth transitions between pages. I’m using Meteor, React and FlowRouter. I tried to add several jquery plugins but it does not work. How can I do this?

2

Take a look at React’s ReactTransitionGroup add-on component. If you want to see it in use, take a look at how the react branch of todos is using it to handle component/page fade transitions. Start in the main layout to get an idea of how it’s setup:

3

After getting the hang of CSSTransitionGroup, also check out velocity-react to take animation one step further. Velocity is a javascript library for animations.

2 Likes
4

Could you please tell me if I am able to use jquery with add-on component? If yes, then how to use it?
This is the jquery script that I’m going to use.

$("body").css("display", "none");
    $("body").fadeIn(400);
    // to fade out before redirect
    $('a').click(function(e){
        redirect = $(this).attr('href');
        e.preventDefault();
        $('body').fadeOut(400, function(){
            document.location.href = redirect
        });
    });
5

If you’re building a react based app, I’d recommend moving away from jquery in areas where there are available react based alternatives (which is almost every area now). React animation libraries exist (like the ones mentioned previously in this thread), so I’d suggest looking into using them. The todos app has a good working example of this. Mixing jquery and react can be done (here’s a jquery animations + react example), but you have to jump through a few extra hoops, since jquery manipulates the DOM, while react manipulates a virtual DOM (before applying those changes to the real DOM).