Page transitions removed when adding nuxt-purgecss defaults
See original GitHub issueI 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:
- Created 5 years ago
- Comments:8 (8 by maintainers)
Top 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 >
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
yep, this worked
whitelistPatterns: [/^keyframes/]
, although I’m not sure why it’s being purgedThere you go ☺️