styled-transition-group icon indicating copy to clipboard operation
styled-transition-group copied to clipboard

Published 20 hours ago • verified publisher icon gabiseabra

Animations does not play sometimes (possible class hash mismatch)

Open manneredboor opened this issue 7 years ago • 5 comments

Hello! First of all — thanks for this nice library! I have catched the problem while using it with babel-plugin-styled-components's option displayName: my animations are not playing. I have noticed that class-hashes on element does not match with classes generated in styles. But I may wrong. Do you have any thoughts why it happens and how we can fix it?

P.S. I have played around with the plugin and I'm not sure what causes the problem now: it happens even without it sometimes.

manneredboor avatar Jan 10 '18 14:01 manneredboor

Hey, thanks! Can you link to an example repo with this bug?

gabiseabra avatar Jan 10 '18 22:01 gabiseabra

@gabiseabra Sure, I've made the repo, it is here: https://github.com/manneredboor/styled-transition-group-test To reproduce the bug you should run it with npm run dev, then make any changes in the styles, save it and reload the page. Read README to run it properly.

I've figured out that the bug reproduces oftenly after bundles rebuilding, but at the first build classes (and animations) are ok.

manneredboor avatar Jan 11 '18 00:01 manneredboor

Was there ever any resolution for this? I've run into this problem, and a weirdness it causes is that I have a component where the animation only plays if it has been hot-reloaded. On first application load, it never does. In the initially loaded case, the activity classes are never set ("sc-bxivhb-appear" etc.).

Meanwhile another component that is very like it works fine under any circumstances. The difference seems to be that the working one is created in the same file it is used by another component, whereas the one that fails has its own file. However, moving it into the same file where it is used has no effect either.

The affected components are found in https://github.com/Orckestra/orc-shared, specifically src/components/Modal/Wrapper.js and src/components/DropMenu/Menu.js. (I'm developing orc-shared npm-linked into a boilerplate application (https://github.com/Orckestra/orc-boilerplate), if you like I can walk you through setting everything up the way I've got it.)

Is there a workaround?

The above was me making a mistake, see below.

gertsonderby avatar Mar 28 '18 11:03 gertsonderby

@gertsonderby I've made similar function that works and using it. Function: https://gist.github.com/manneredboor/82fe5807c16bc59c22ba69b6a494166c Usage example: https://gist.github.com/manneredboor/9bbbec889ea7f82a49196753af1f48ab

manneredboor avatar Apr 07 '18 22:04 manneredboor

After some searching and maneuvering, I found out what my problem was: a parent element was overriding the transition declaration I had set. Classes etc. were set correctly, and once I set the transition !important, it worked.

Sorry for any time I may have wasted!

gertsonderby avatar May 02 '18 12:05 gertsonderby