CSS styles are applied only after element is revealed

[joetm]

I transition an image into a headline.

class App extends Component {
	constructor() {
		super();
		this.state = {
			loading: true
		};
	}
	componentDidMount() {
		setTimeout(() => {
			this.setState({loading: false});
		}, 2000);
	}
    render() {
	    return (
	      <div className="App">
	        <div className="App-header">
				{this.state.loading && <Overdrive id="content"><img src={logo} className="App-logo" alt="logo" /></Overdrive>}
				{!this.state.loading && <Overdrive id="content"><h2>React-Overdrive Test</h2></Overdrive>}
	        </div>
	      </div>
	    );
    }
}

The basis is the default create-react-app setup: https://github.com/joetm/overdrive-test

What I notice is that the style of the headline is not applied immediately. I see the headline appear with black text left-aligned. Then it jumps to being center-aligned with white text.

Anything that can be done in this case?

[berzniz]

While the animation takes place, the elements are clones and moved without their wrapping elements. So while it inherits the size & position, it may lose colors, text-alignment that is styled on the parent elements.

I suggest adding the colors and text-align to the element itself (via CSS) (or to the body element).

[mbrookes]

@berzniz Love the concept - this is the first library I've found that could solve the problem of how to achieve complex multi-element transitions such described for Material Design: https://material.io/guidelines/motion/material-motion.html#material-motion-what-makes-a-good-transition

However, passing styling from a parent to child, through props or CSS className is a common pattern, particularly where the child component may be provided by a 3rd party library so can't be styled any other way. (Even within Material-UI we consume and in some cases restyle our own components to build up more complex components.)

This may not be a solvable problem, but just wanted to add some support to the issue.

[berzniz]

@mbrookes - these are some good points.

Since the elements are cloned and attached to the body, they will indeed lose all CSS rules inherited from their parents. Usually frameworks (such as bootstrap) are working on the body level so styles still apply.

There could be a solution to use getComputedStyle on all child elements and capture their styles, but this could be costly (especially for deeply nested DOM trees). I'll try to play with that idea.

[gryzzly]

This could be partly solved by specifying a "root" element to nest the clones under. If the root doesn’t have position applied the absolute positioning should still work, but some CSS cascade would apply.