The resulting <g> from an <Anime> tag breaks a Relative % Chain
Crizzooo opened this issue · comments
When inserting an component within one of my containers (i.e a 50% container) to animate a child of a relative width (i.e 100% of its container), the will break the relative width chain and not occupy the full container.
Proposed fix: initiating Anime components with a width style of 100% or to give g elements a property of width: 100% in the .css.
Let me know if you approve of a solution to this issue and I can make the PR
https://github.com/hyperfuse/react-anime/blob/master/packages/react-anime/src/react-anime.js#L83
The current version of React Anime lets you add a style prop to the <Anime/> component, and from there you can set the width of the <g/> tag within it to 100%. I'll go ahead and release a patched version to NPM with the fixes on the repo.
Yeah, Ive been passing style down to work around this.
I was suggesting that width: 100% should be a default style on the Anime component to keep the relative size chain going by default, rather than needing to pass a style obj every single time I create an Anime component within the middle of my component chain.
I don't think it would create any negative side effects? Users who are not using relative width will likely be passing in Absolute values and overriding this anyway, no?
I feel as though it would mess with the purity of the component, there may be some edge cases we're not considering here where that kind of behavior would be a bad thing. Let me think about it a bit.
If anything, there's always the option of wrapping an <Anime/> component, say a <RelAnime/>, and just pass the styles there.