CSS Transitions with Redux

Whaaaaa!!

One of the things I’ve come to realize throughout my endless foray across the JavaScript ecosystem is just how much I really, really dislike jQuery. Not because it’s a useless tool (it’s incredibly useful and the api is high powered stuff), but because of the spaghetti code it encourages in the end.

If this little problem was simple enough to solve with jQuery, then this one must be too! Oh and this one, too, right?! Before you know it, you’ve got noodles slamming against each other and making your project harder to read, harder to add to, and harder to refactor when the time comes. This has lead to many exercises in hair pulling and face bashing, to which I’m shocked I still have both hair and a keyboard.

React has gone quite a ways in helping me to overcome my need to pull tools from the jQuery toolbox, and heavily discouraged it as well. The DOM can remain a pure representation of the application’s state, and that’s just fantastic to me. As I was dozing off to sleep last night, though, I started to wonder (as I often do)…

How else can I remove jQuery from my day to day life?

This has become an increasingly more difficult task, but as I was plugging away at my own little personal space before bed I started to want transitioned animations on my github page. So I started to plan it out.


I wanted to ensure that:

  • Transitions were triggered via the application’s state
  • There were no DOM changes involved outside of the render method

Given I’d already set up my github page to have a redux store, the process seemed like it should be very straight forward — and it was. The first step in any new functionality I want to add is to set up the action and reducer methods to handle the new functionality I’m adding, and so let’s go through it.

export function setTransition(start) {
return {
type: ‘START_TRANSITION’,
start
}
}

The action is fairly simple, and while not explicitly stated here, the start parameter is a boolean. Next up, the reducer:

{...}
function setTransition(state, start) {
return state.set(‘transition’, start)
}
{...}
export default function(state=initialState, action) {
switch (action.type) {
{...}
case 'START_TRANSITION':
return setTransition(state, action.start)
{...}
}
return state
}

So a boolean action is sent, and the state tree will now hold data to tell the components whether or not a transition should be triggered or not. This is precisely the goal of the first step. Now let’s peek over at the Home component:

componentDidMount: function() {
setTimeout(() => {
this.props.setTransition(true)
}, 100)
},
componentWillUnmount: function() {
this.props.setTransition(false)
},

I needed the transition to be triggered after the browser had a chance to digest what React had just rendered on to it, and so I made a very brief timeout before triggering any actions. I also ensured that before the component unmounted, it reset the transition state to false so the next component would be able to have a transition activated if it so desired.

We’ll just peek at one of the components (let’s keep this story dry, yeah?), and stay with the Home component. In order to use the new transition prop as a marker for what class an element should hold, I needed to set up some kind of conditional class variable.

render: function() {
{...}
const transitionClass = this.props.transition ? “component-loaded” : null
return (
<div className={“s-home “ + transitionClass}>
{...}
)

So now I’ve established that if a transition is called for in the application state, the class to be transitioned to will be added. The second goal is met! Of course, nothing at all will happen if I don’t set up the .less files to account for the new styles I’m trying to implement, but I’ll let you peek over at it instead of clogging this space up with it.

Now there’s nothing stopping you from using any implementation of Flux architecture to accomplish the same thing, but I’m a fan of Redux and so I used it instead. The path to setting it up is ultimately the same, though instead of a reducer you’re putting the new application state in to a specific store. If you see anything that could have been implemented better, please let me know!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.