Block controls: Animate block controls as they appear

[youknowriad]

Small PR adding an animation to block controls to match the prototypes

refs #15

[jasmussen]

This looks and works great! Solid work!

When I move a block upwards, the controls stay in place. When I move a block downwards, the animation to make the controls appear plays again. The desired behavior would be no animation of the controls when moving blocks.

[youknowriad]

When I move a block downwards, the animation to make the controls appear plays again.

I'm afraid we can not do much about this (at least not easily). I suspect this is caused by the way React handles component reordering. We'll need to leverage some React Animation library to perform this. Maybe https://github.com/reactjs/react-transition-group or https://github.com/chenglou/react-motion. @aduth any feedback on these libraries or Animations in React in general?

[jasmussen]

Going to try a thing with animation-play-state: paused; real quick.

[jasmussen]

So, the play-state idea didn't work, but here's another that might.

.editor-visual-editor__block-controls {
	@include animate_fade;
	position: absolute;
	bottom: 100%;
	margin-bottom: -4px;
	left: 43px;
	display: flex;

	.is-moving & {
		animation-delay: -.2s;
	}
}

That is — the negative animation delay basically starts the animation on its last frame. But we need a CSS class to indicate that the block is being moved for this to work. Do you think this makes sense/is worth it?

If not, then it's not a blocker for merge, definitely something we can live with.

[youknowriad]

But we need a CSS class to indicate that the block is being moved for this to work. Do you think this makes sense/is worth it?

Adding these "animation" classes is exactly what https://github.com/reactjs/react-transition-group does, it's a helper to avoid adding complexity to the code to handle animations.

[jasmussen]

Maybe worth revisiting some animation tools to enhance states, but not a blocker for merge.

[aduth]

We might consider creating a common.scss to import these files so we don't have to manage the Webpack configuration directly.

[aduth]

Nice idea to move the condition outside the common parent 👍