Comments (8)
mattaningram
commented on September 2, 2024
That's strange. My initial guess is it has something to do with the statically generated site being hydrated after the static HTML and CSS renders.
Where/when is the animxyz CSS being loaded when the site loads? If you can include it with the rest of the styling CSS that loads with the initial site load, then the elements with xyz="fade ..." should be automatically hidden due to animxyz setting the animation-fill-mode to both.
If the animxyz CSS is being loaded only when the page hydrates with Vue then that would explain what you are seeing.
from animxyz.
Sananes
commented on September 2, 2024
@mattaningram that's basically what I think is also happening. Do you think this is also related to: #38?
Thanks in advance!
from animxyz.
Sananes
commented on September 2, 2024
I've tried a brand new nuxt project to see if I did something incorrectly, but it looks to me that on statically generated sites it only loads once page hydrates...
from animxyz.
mattaningram
commented on September 2, 2024
Where in your Nuxt setup is the actual CSS for animxyz being loaded? Ideally you would load the CSS prior to the JS rather than with it. Is it included in the CSS sent to the client pre-hydration?
from animxyz.
Sananes
commented on September 2, 2024
Hey @mattaningram thanks for getting back to me! I've tried both manually adding a link to the <head> as well as a couple of other solutions and site renders everything first, then animation kicks in. It's very strange. Something I've noticed though, the animxyz css doesn't currently include the animation-fill-mode: both?
from animxyz.
mattaningram
commented on September 2, 2024
It's definitely in there, if you manually inspect animated elements that have the xyz classes active you can see it set on the animation property, and you can see it in the code here: https://github.com/ingram-projects/animxyz/blob/master/packages/core/src/_functions.scss
Another thing I'm noticing on your site is the xyz classes aren't being removed when the animation is over they way they should be. Probably also related to the static site HTML being hydrated.
Hmmm just looked at your <head> element and it appears to have a few <style> tags with AnimXYZ compiled CSS but strangely not all the CSS? Is your Nuxt build trying to optimize loaded CSS to only show "above the fold" styles and asynchronously load the rest after?
from animxyz.
Sananes
commented on September 2, 2024
@mattaningram so I disabled ssr globally on my build and that seems to have fixed the issue. Although, i don't particularily want to disable ssr for it to work. It would be great to have it work with ssr set to true. I'm not too sure how I would go about that. Whe n I set ssr to false i get the same issue found here:
Hello, when I compile my Nuxt app in static mode (nuxt generate), the XyzTransition and XyzTransitionGroup elements are compiled to xyztransition and xyztransitiongroup, which are not valid HTML, causing an hydration error in dev mode and a "Failed to execute 'appendChild' on 'Node'" error when serving the compiled project with a static web server.
#38
from animxyz.
Sananes
commented on September 2, 2024
Here's some context too:
from animxyz.
Related Issues (20)
- warning in console with vue3 + vite HOT 2
- Does it work with react-router-dom v6+?
- ES Module issue with Nuxt 3 HOT 7
- Not friendly to vue3. The animation cannot be displayed when I load the page for the first time. How should I solve it? HOT 2
- Animations flickering in React 18 HOT 2
- Issue with mode="out-in" HOT 1
- Responsive Design? HOT 1
- --xyz-duration not working, not even in sandbox HOT 1
- Is this being maintained? HOT 2
- How to use it with nuxt3? HOT 2
- Infinite Animation not working properly
- w3C html spec compliance: custom attributes need a data- prefix. HOT 1
- Issue with Bootstrap modal HOT 2
- Change default perspective to none HOT 4
- Repeat appear-visible
- Struggling to get it to work using React HOT 2
- ient HOT 1
- onanimationend and onanimationstart fired before the time and twice!
- React Router V6 `Routes` location prop breaking HOT 1
- Pls make it compatible with react 18 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from animxyz.