Comments (6)
I found that this problem persists in my Nuxt project, and the only way to solve it was to comment out the entire
beforeDestroy()
hook in the package'ssrc/flickity.vue
component.
Had the same problem using Nuxt and this is a good fix, except…
Not sure if that will cause other issues down the road but it's working as of right now.
…you still need to destroy the Flickity instance(s) after being done with them.
My case was that I wanted to scroll to the top of the page during the leave transition and all my Flickitys were gone before the scroll even started, leaving the page looking gnarly. After disabling the beforeDestroy
hook in vue-flickity
, I load up the data
object of my GSAP tween with all my Flickity references and destroy()
them after the leaving animation completes.
All this is necessary because the leave
, beforeDestroy
and destroy
hooks run immediately on a route change and all references get destroyed before the animation finishes so we have to keep them around somewhere.
Update
To disable the hook persistently without worrying about changes from package updates or npm clean installs, the beforeDestroy
method can be set to undefined
when defining the plugin.
/* plugins/flickity.js */
import Vue from "vue";
import Flickity from "vue-flickity";
import "flickity-imagesloaded";
import "flickity-fade";
Flickity.beforeDestroy = undefined;
Vue.component("flickity", Flickity);
from vue-flickity.
I found that this problem persists in my Nuxt project, and the only way to solve it was to comment out the entire beforeDestroy()
hook in the package's src/flickity.vue
component. Not sure if that will cause other issues down the road but it's working as of right now.
from vue-flickity.
Hard to say on this without debugging the UI, but it might be the .destroy()
method removing flickity and its core styling while the component is unmounted and animated away. You could try modifying the wrapper so flickity is not destroyed before the transition finishes or you could hardcode some of the necessary styles in your codebase so they remain after flickity is unmounted or you could use <keep-alive>
above the component so the beforeDestroy()
hook is never triggered.
from vue-flickity.
@b8ne I know it's been a while, but were you ever able to find a workaround for this? Also running into this issue.
from vue-flickity.
I had the same problem and was able to avoid it by using keep-alive
as suggested by @mystrdat. Check the docs for details. Note that keep-alive
needs to be around your component but inside the transition.
/cc @chasegiunta @b8ne
from vue-flickity.
Has anyone managed to solve it when importing vue-flickity only inside a Nuxt single page, like this:
export default {
components: {
Flickity: () => import("vue-flickity")
}
}
Thanks for any pointers.
from vue-flickity.
Related Issues (20)
- Any plans to support the flickity-fullscreen option? HOT 6
- Carousel not displaying properly HOT 4
- How to use Flickity Events? HOT 12
- Router links triggers during slides draggin HOT 5
- only show one pre page
- How can i instance multiple vue flickity in the same page? HOT 1
- cannot access flickity via this.$refs HOT 1
- A few methods are missing
- Open a fullscreen container with the image and comments HOT 1
- License: GPLv3 or MIT?
- Sometimes works fine, sometimes does not work properly HOT 1
- Using flickity lazyload: no effect HOT 1
- Provide API for parent component to control the destroying of Flickity HOT 1
- Cells get rendered in reverse HOT 2
- Best way to reinit HOT 1
- Request: support for imagesLoaded option HOT 2
- Fade option not working HOT 4
- Flickity + Typescript Errors: Bad Element for Flickity: .carousel HOT 1
- Images flicker when going to previous route HOT 1
- Carousel Stuck on Last Slide HOT 2
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 vue-flickity.