Animations not working with custom placeholders.
See original GitHub issueshowLoadingAnimation prop not working with custom placeholders.
render() {
<ReactPlaceholder showLoadingAnimation ready={ready} customPlaceholder={<TextRow />}>
<div className={bodyClasses}>
{children}
</div>
</ReactPlaceholder>
}
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Animation for Placeholder Not Running - Stack Overflow
The curious thing is if I put the css attribute for opacity directly in the placeholder SCSS class it works fine. input {...
Read more >Camtasia - Re-use Custom Animations With Placeholders
In this video, we take a custom animation and turn it into a placeholder, to use it again and again.
Read more >Animations made on the Slide Master Work, but are not visible ...
If the shapes with animation on the master are not placeholders then you won't see them listed in the animation pane in slide...
Read more >Additional patterns: animated placeholders | Algolia
This guide uses InstantSearch.js to animate placeholder text. Animated placeholders mimic the effect of typing queries in a passive search box.
Read more >Glide — Placeholders & Fade Animations - Future Studio
Transitions. No matter if you're displaying a placeholder before loading the image or not, changing an image of an ImageView is a pretty ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi @FrancescoCioria,
It was indeed with
react-placeholder
’s exported components, like this:Then:
Please don’t mind the empty DIV tag that will have my loaded component, it’s just a test case here.
So as you can see, I tried to make the
showLoadingAnimation
working but it seems like it won’t load the className in the DOM if we have custom markup.So the workaround until the bug is fixed: I added a
className="show-loading-animation"
to my wrapper in my const and copy/paste your keyframes in one of my CSS files.That’s it!
I hope my answer is clear, my english is pretty bad.
Thank you for your job and have a nice day.
@FrancescoCioria thank you very much!
See you.