Nuxt•2mo ago

SVG and CSS transitions

I'm trying to animate an svg but it doesn't work, it display the svg but doesn't interpret the CSS transitions properties in the <style scoped> part according to the svg Is there something i need to configure in nuxt.config.js ? Here is the playground: https://stackblitz.com/edit/github-uzr4ak?file=public%2Flogo.svg,app.vue

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

9 Replies

kapa.ai•2mo ago

Hi @BobLamarley. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have specific details about configuring SVG animations or CSS transitions for SVGs in Nuxt. However, I can provide some general insights about transitions and styling in Nuxt that might be helpful: 1. Nuxt supports CSS transitions and animations out of the box. You don't need to configure anything special in nuxt.config.js for basic CSS transitions to work Nuxt Transitions Documentation (https://nuxt.com/docs/getting-started/transitions#transition-with-nuxtpage). 2. For more advanced transitions, Nuxt offers an experimental View Transitions API integration. This can be enabled in your nuxt.config.ts file:

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

View Transitions API Documentation (https://nuxt.com/docs/getting-started/transitions#view-transitions-api-experimental) 3. If you're using external stylesheets or CSS libraries, you can include them in your Nuxt project either by importing them in your components or by adding them to the css array in your Nuxt configuration:

export default defineNuxtConfig({
  css: ['your-css-file.css']
})

export default defineNuxtConfig({
  css: ['your-css-file.css']
})

Stylesheets in Nuxt Documentation (https://nuxt.com/docs/getting-started/styling#stylesheets-distributed-through-npm) However, the specific issue you're experiencing with SVG animations might not be related to Nuxt configuration. It could be a matter of how the SVG is structured or how the CSS is applied to it. Without seeing your specific code, it's difficult to pinpoint the exact problem. If the issue persists after checking these points, you might want to create a minimal reproduction of the problem and open an issue on the Nuxt GitHub repository for more specific assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@314138038995255298> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

BobLamarleyOP•2mo ago

For example in this site, it's working: https://svgartista.net/ How can make it work in my nuxt app

SVG Artista - SVG Drawing Animation Generator

SVG Artista is a free tool that helps you easily create amazing SVG drawing animations by animating stroke and fill properties of your SVG graphics.

hiimmox•2mo ago

Wrap all your svg elements with :deep() Or you could try removing the "scoped", but wrap all your styles in a parent selector. eg.

.app-loader {
  svg .svg-elem-1 {
...

.app-loader {
  svg .svg-elem-1 {
...

BobLamarleyOP•2mo ago

With the "scoped" removed, and wrap all styles in .app-loader it doesn't work For the :deep() i don't see how to do that, do you have an example ? Edit: Ok i've found how, it doesn't work neither 😦

hiimmox•2mo ago

How about trying https://nuxt.com/modules/nuxt-svgo instead of getting raw html, that might help

Nuxt

Nuxt-svgo · Nuxt Modules

Nuxt module to load optimized SVG files as Vue components

BobLamarleyOP•2mo ago

If i use nuxt-svgo, it seems to load the svg in the dom but it add custom class with autogenerated number who change each refresh that broke my css file:

BobLamarleyOP•2mo ago

Adding active: false to prefixIds plugins doesn't change anyuthing

BobLamarleyOP•2mo ago

Nobody has an idea ? :/ Up, maybe someone will know 🙂

Gaming

Programming

SVG and CSS transitions