如何停止FOUC时离开路线与'vue-flickity‘旋转木马/滑块？

Question

我在我的Vue应用中使用了MetaFizzy's Flickity的vue-flickity包。当从具有vue-flickity滑块实例的路线导航离开时，您会看到一个简短的一览表，其中显示文档中所有未设置样式的幻灯片，因为<Flickity />滑块已卸载(？)视图也会发生变化。

我尝试过将其包装在<keep-alive>中，但无济于事。

在用户离开某个路线之前，隐藏或“动画显示”组件的最佳方法是什么？

我还尝试使用beforeRouteLeave()，将<Flickity ref="mySlider" />上的opacity转换为0，然后更改路由。我尝试了下面这样的方法，但它没有像预期的那样工作：

// SliderView.vue

<template>
  <Flickity ref="mySlider">
    <div v-for="(slide, index) in slides" :key="index">
      // slide content markup
    </div>
  </Flickity>
</template>

<script>
  import 'Flickity' from 'vue-flickity'

  export default {
    name: 'SliderView'
  }
</script>

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import SliderView from './views/SliderView.vue'

export default new Router({
  routes: [
    {
      path: '/routeWithSlider',
      component: SliderView,
      beforeRouteLeave (to, from, next) {

        const slider = this.$refs.mySlider

        if (slider) {
          slider.style.transition = 'opacity .5s'
          slider.style.opacity = 0
          setTimeout(() => {
            next()
          }, 600)
        } else {
          next()
        }
      }
    }
  ]
})

这是正确的方法吗，或者我应该以不同的方式来处理？

此外，如果有一种方法可以在不指定refs的情况下全局地为所有路由上的所有<Flickity />实例执行此操作，这也会很有用。

我使用Vue的时间还不长，所以我正在寻找一些方向的指导。

Answer 1

我发现实现这一点的最好方法是在组件上使用BeforeRouteLeave()生命周期钩子，在更改路由之前使用滑块来设置Flickity滑块退出的动画：

beforeRouteLeave (from, to, next) {
  const slider = this.$refs.flickity.$el
  slider.style.transition = 'opacity .25s ease'
  slider.style.opacity = 0
  setTimeout(() => {
    next()
  }, 250)
}