Transition issue because of destroyed() hook

[pschaub]

The slick will be "unslicked" on the destroyed hook. That results into a broken layout if the developer is using page transitions (e.g. on leaving a route). The reason behind this is that the unslick command will remove all slick classes and information from the DOM elements.

See also: https://github.com/vuejs/vue/issues/6983

There should be a way to wait for the transition to finish before unslick happens.

This can be easily reproduced with 2 pages and a very slow page route transition.

<transition name="route-transition-fade" mode="out-in">
    <router-view :key="$route.path"/>
</transition>

.route-transition-fade-enter-active, .route-transition-fade-leave-active {
  transition: opacity 500s ease;
}

.route-transition-fade-enter, .route-transition-fade-leave-to {
  opacity: 0;
}

[josephahern]

Has a solution for this been determined yet? Would love to continue using slick-slider with vue!

[ArkhipovK]

Just faced this problem

[radiantstatic]

@ArkhipovK - I ended up doing something like this had to dig through commit history as we ended up not using slick in the end.

In slickCarousel.vue

destroyed() {
  const manualDestroy = () => {
  $(this.$el).slick('unslick');
    console.log('unslicked');
    this.$el.removeEventListener(manualDestroy);
  };
  this.$el.addEventListener('transitionend', manualDestroy);
},

[khudia]

Doesn't help (( How to disable destroy method on transition?

[diachedelic]

@khudia maybe check out https://github.com/diachedelic/vue-removed-hook-mixin

[mnlauaa]

@diachedelic I got an error because this.$options.removed is undefined

[diachedelic]

@mnlauaa did you define a removed hook in your component? Check the example usage in the readme

[NickolayBauer]

You can hide the slick after the animation starts. No slick - no problem.

.fade-leave-active {
  .--you-block-with-slick-- {
    opacity: 0;
    display: none;