CSS transition when sorting a list - css

Question

I'm trying to create a simple css background transition on the rows of a table as items go from inactive to active.
The transition should fade from blue (active === false) to pink (active === true).
The transition works as expected when going from blue to pink and the order changes, but not when going from pink to blue and the order changes.
I've made a simple example of my problem https://codesandbox.io/s/simple-react-8pf4s
Thanks in advance for any help!

Answer 1

That might be just how React handles list reconciliation.
When the top item is turning inactive, it's first removed from the DOM and then appended as a new child. Which is why there is no transition. The transition works when you're turning the bottom item active as it's again the top item that's getting removed, so the transitioning item stays in the DOM.
Having keys on the table rows in this particular scenario doesn't help since, as far as I can tell from this, they are only used for optimization and do not actually guarantee the same DOM elements will be re-used.
You might stumble across the same problem mentioned here.
You could look into some libraries for transitioning lists to find a potential solution. E.g. react-flip-move
Part of me hopes that I'm wrong cause it kinda sucks and makes a simple thing quite complicated.

Answer 2

I was able to get the sorting issue figured out for you, but the real stumper is the CSS issue..
The issue has to do with keys and creating mapping over items.. From what I make of it, React will apply the transition to a specific key.. After toggling to inactive, it's like React is treating it as a completely new node, and for some reason it doesn't correctly apply the transition..
I am not sure why this works one way but not the other, it's really odd to me... I was unable to find a fix online for this, and I tested a bunch of stuff.. You should look into CSS transitions with React and keys..
With that being said, I did come up with a few "hacky" ways to accomplish this..
CSS AS JS OBJECTS:
const { useState, useEffect } = React;
const { render } = ReactDOM;
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const sourceData = [
{
id: "es",
1: "uno",
2: "dos",
3: "tres",
active: true
},
{
id: "de",
1: "eine",
2: "zwei",
3: "drei",
active: false
},
{
id: "abc",
1: "a",
2: "b",
3: "c",
active: false
}
];
const activeClass = {
background: "pink",
color: "blue",
transition: "all 1s"
};
const inactiveClass = {
background: "blue",
color: "pink",
transition: "all 1s"
};
const App = () => {
const [data, setData] = useState(sourceData);
useEffect(() => {
setClassNames();
}, [data]);
const sortData = d => d.sort((a, b) => (a[1] < b[1] ? -1 : 1));
const sortAllData = d => [
...sortData(d.filter(i => i.active)),
...sortData(d.filter(i => !i.active))
];
const handleToggle = index => event => {
let clone = [...data];
clone[index].active = !clone[index].active;
setData(sortAllData(clone));
};
const setClassNames = () => {
let actives = document.querySelectorAll(`[dataactive=${true}]`);
let inactives = document.querySelectorAll(`[dataactive=${false}]`);
setTimeout(() => {
actives.forEach(a => {
Object.keys(activeClass).forEach(k => a.style[k] = activeClass[k])
});
inactives.forEach(ina => {
Object.keys(inactiveClass).forEach(k => ina.style[k] = inactiveClass[k])
});
}, 10);
};
return (
<div style={styles}>
<table>
<thead>
<tr>
<td>Active?</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
{data.map((d, index) => {
return (
<tr dataactive={d.active.toString()} key={d.id} id={d.id}>
<td>{d.active.toString()}</td>
<td>{d[1]}</td>
<td>{d[2]}</td>
<td>{d[3]}</td>
<td>
<button onClick={handleToggle(index)}>TOGGLE</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
USING A .CSS FILE:
const { useState, useEffect } = React;
const { render } = ReactDOM;
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const sourceData = [
{
id: "es",
1: "uno",
2: "dos",
3: "tres",
active: true
},
{
id: "de",
1: "eine",
2: "zwei",
3: "drei",
active: false
},
{
id: "abc",
1: "a",
2: "b",
3: "c",
active: false
}
];
const App = () => {
const [data, setData] = useState(sourceData);
useEffect(() => {
setClassNames();
}, [data]);
const sortData = d => d.sort((a, b) => (a[1] < b[1] ? -1 : 1));
const sortAllData = d => [
...sortData(d.filter(i => i.active)),
...sortData(d.filter(i => !i.active))
];
const handleToggle = index => event => {
let clone = [...data];
clone[index].active = !clone[index].active;
setData(sortAllData(clone));
};
const setClassNames = () => {
let actives = document.querySelectorAll(`[dataactive=${true}]`);
let inactives = document.querySelectorAll(`[dataactive=${false}]`);
setTimeout(() => {
actives.forEach(a => a.className = "active");
inactives.forEach(ina => ina.className = "inactive");
}, 10);
};
return (
<div style={styles}>
<table>
<thead>
<tr>
<td>Active?</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
{data.map((d, index) => {
return (
<tr dataactive={d.active.toString()} key={d.id} id={d.id}>
<td>{d.active.toString()}</td>
<td>{d[1]}</td>
<td>{d[2]}</td>
<td>{d[3]}</td>
<td>
<button onClick={handleToggle(index)}>TOGGLE</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
render(<App />, document.body);
.active {
background: pink;
color: blue;
transition: all 1s;
}
.inactive {
background: blue;
color: pink;
transition: all 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

Answer 3

This is strange behaviour, but I assume that as react is controlling inserting the dom node in its new position, the class is already added and so renders immediately. To counteract this I have created a keyframe animation and a stack of ids that are animating to apply this animation to. I could confirm that the same element was being reused (and not destroyed and recreated) by logging refs as they were created.
https://codesandbox.io/s/objective-dijkstra-ifren
const App = () => {
const [animating, setAnimating] = useState([]);
const removeAnimation = id => {
setAnimating(animating.filter(x => x !== id));
};
const [data, setData] = useState(sourceData);
const toggle = id => {
let data2 = [...data];
const index = data.findIndex(x => x.id === id);
data2[index] = { ...data2[index], active: !data2[index].active };
setAnimating([...animating, data2[index].id]);
data2 = [...data2.filter(x => x.active), ...data2.filter(x => !x.active)];
setData(data2);
};
return (
<div className="App">
{data.map(d => (
<div
key={d.id}
className={cl(
"row",
d.active && "row_active",
!d.active && animating.includes(d.id) && "row_hasAnimation",
d.active && animating.includes(d.id) && "row_active_hasAnimation"
)}
onAnimationEnd={() => removeAnimation(d.id)}
>
<div className="cell">{d[1]}</div>
<div className="cell">{d[2]}</div>
<div className="cell">{d[3]}</div>
<div className="cell">
<button onClick={() => toggle(d.id)}>Toggle</button>
</div>
</div>
))}
</div>
);
};