Blocks: Animate the controls on appear only #905
Conversation
- This avois animating the controls when we move the blocks up and down
There was a problem hiding this comment.
Nice, I'd started looking at this a few days back and encountered some issues with the conditionally shown single child. The FirstChild pass-through is a bit gross but the recommended solution. The reasoning there makes me wonder that they might be able to eliminate it once Fiber / React 16 lands and supports fragments.
editor/modes/visual-editor/block.js
Outdated
| <Slot name="Formatting.Toolbar" /> | ||
| </div> | ||
| <CSSTransitionGroup | ||
| transitionName="controls" |
There was a problem hiding this comment.
Could we still use our is- modifier convention here as a prefix, e.g. is-appearing?
|
Thanks for doing this. This is a nice solution, and works great! |
editor/modes/visual-editor/block.js
Outdated
| <Slot name="Formatting.Toolbar" /> | ||
| </div> | ||
| <CSSTransitionGroup | ||
| transitionName={ { appear: 'appear-animation', appearActive: 'is-appearing' } } |
There was a problem hiding this comment.
Are we using the appear-animation part of this at all?
There was a problem hiding this comment.
Even if we're not using it, it's required to avoid a JS error.
There was a problem hiding this comment.
Even if we're not using it, it's required to avoid a JS error.
Could we just use a string, like transitionName="is-appearing". Wouldn't that give us a is-appearing-active modifier? Seems reasonable enough naming to me.
There was a problem hiding this comment.
I think this would give is-appearing-appear-active
There was a problem hiding this comment.
Maybe transitionName="is"
Well, in any case, could it at least be an empty string? I think the "appear-animation" could be a little misleading in implying that it's necessary for something.
There was a problem hiding this comment.
Maybe transitionName="is"
I don't like this option because it's misleading too, it's kind of a hack
Using an empty string is not possible (still a JS error).
What about { appear: 'is-appearing', appearActive: 'is-appearing-active' } and style is-appearing-active?
Oh sorry! I pushed a "debug" change (I've used a high timeout to test the className). Should be fixed by 63df2f2 |
Since we can't avoid the rerendering when we move the block down, this uses
react-transition-groupto animate the controls only when they appear the first time.