question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Page transitions removed when adding nuxt-purgecss defaults

See original GitHub issue

I noticed my page transitions are gone once I add purgecss. Removing the module re enables them.

My sass:

.page-enter-active {
  animation: acrossIn .40s ease-out both;
}

.page-leave-active {
  display: block;
  animation: acrossOut .80s ease-in both;
}

@keyframes acrossIn {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes acrossOut {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -100%, 0);
  }
}

My nuxt config

modules: [
    ...
    'nuxt-purgecss'
  ],
  purgeCSS: {
    whitelistPatterns: [/^page/],
    whitelist: ['body', 'html', 'page', 'nuxt-progress'],
    rejected: true
  },

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
bovas85commented, Oct 28, 2018

yep, this worked whitelistPatterns: [/^keyframes/], although I’m not sure why it’s being purged

0reactions
manniLcommented, Oct 28, 2018

There you go ☺️

Read more comments on GitHub >

github_iconTop Results From Across the Web

Page and Layout Transitions in Nuxt.js - DEV Community ‍ ‍
With Nuxt.js it is really easy to add transitions between your pages. ... The default Nuxt.js transition name for pages is page ....
Read more >
custom default styles have been removed by PurgeCSS in ...
How can I config tailwind.config.js to make custom default styles be rendered in result? Whitelist only accepts classnames/ids. Thanks a lot!
Read more >
Transitions - Nuxt
The Nuxt default transition name is "page" . To add a fade transition to every page of your application, all you need is...
Read more >
Nuxt.js - PurgeCSS
js presets all the configuration needed to make your development of a Vue.js application enjoyable. Nuxt.js can produce Universal, Single Page ...
Read more >
nuxt-purgecss - npm
Remove unneeded CSS with ease; Sane default settings; Built on top of purgecss; Nuxt 2 and Nuxt 3 support (Use v1.0.0 for Nuxt2...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found