not rerendring divs - maybe because of inherit

[ddfridley]

I am having a problem, where the background color of a div is changing, along with being moved in the list, but react-flip-move isn't changing the background color consistently, where a strait render of the list does. This has worked in the past, and I'm not sure when it stopped working (upgrated to react16 or to react-flip-move 3.03.

I have built a demo repo to reproduce it. I suspect that the problem is that the div that needs to change color is inheriting the color from it's parent, because demo.css says:

.demo div { background-color: inherit }

And then the list that I am rendering is of: class FlipItem extends React.Component { render(){ const {bgColor, id, moveToTop } = this.props; return( <div key={item-${id}}> <div style={{backgroundColor: bgColor, width: '250px', height: '50px', cursor: "pointer"}} onClick={moveToTop} > <div style={{ textAlign: 'center', height: "100%"}}> {id} </div> </div> </div> ); } }

The inner most div, doesn't have it's background color set, but should be inheriting it from it's parent. I suspect flip-move is optimizing it out.

Demo code at: https://github.com/ddfridley/flipmovebug and demo is running at: https://flipmovebug.herokuapp.com/demo.html

It's impacts a lot of code to move away from using inherit. But if you can think of some other work around, I'm game to try. Or, if you can point me to where to start looking in the source, I'm game to try.

Thanks.

[ddfridley]

Update: I rolled back to: "react": "^15.6.2", "react-dom": "^15.6.2", "react-flip-move": "^2.10.2" And still have the problem, so not not as new as I thought.

[joshwcomeau]

Hey @ddfridley,

I may be misunderstanding, but playing with the demo, I think this behaviour is just a side-effect of how FLIP works.

When I click on an item, the DOM is immediately updated so that the item I click on is moved to the top of the list, and then the CSS animation kicks in to slide it to its normal position. Because of that, the background color is applied immediately, instead of at the end of the animation.

I don't really know of a fix for this... I think it's a fundamental problem of the FLIP technique. I suppose ideally you could add a transition to the background color to have it slowly shift from pink to aqua, but that's beyond the scope of FLIP move. I'd check out react-flip-toolkit, it might be able to handle arbitrary CSS properties.

[ddfridley]

Well thanks for looking at it.?? And thanks for the link to react-flip-toolkit.?? I am able to get that to work the way I need, but they are lacking the onFinishedAll event, and I think I can create a work around.

Thanks for sharing this work!

On 5/3/2019 12:45 PM, Joshua Comeau wrote:

Hey @ddfridley https://github.com/ddfridley,

I may be misunderstanding, but playing with the demo, I think this behaviour is just a side-effect of how FLIP works.

When I click on an item, the DOM is /immediately/ updated so that the item I click on is moved to the top of the list, and then the CSS animation kicks in to slide it to its normal position. Because of that, the background color is applied immediately, instead of at the end of the animation.

I don't really know of a fix for this... I think it's a fundamental problem of the FLIP technique. I suppose ideally you could add a transition to the background color to have it slowly shift from pink to aqua, but that's beyond the scope of FLIP move. I'd check out react-flip-toolkit, it might be able to handle arbitrary CSS properties.

??? You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joshwcomeau/react-flip-move/issues/240#issuecomment-489217563, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZJ535DRGFUB6XY5XVABQDPTSI4NANCNFSM4HKRGDDQ.