如何在 'vue-flickity' carousel/slider 离开路线时停止 FOUC？

Question

我在我的 Vue 应用程序中为 MetaFizzy's Flickity 使用 vue-flickity 包。当离开具有 vue-flickity 滑块实例的路线时，您会得到一个简短的 FOUC，显示文档中所有未设置样式的幻灯片，因为 <Flickity /> 滑块被卸载（？）并且视图发生变化。

我试过用 <keep-alive> 包装它，但这没有用。

在用户导航离开路线之前隐藏或"animating out"组件的最佳方法是什么？

我也尝试过使用 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)
}

如何在 'vue-flickity' carousel/slider 离开路线时停止 FOUC？

How to stop FOUC when leaving route with 'vue-flickity' carousel/slider?

fouc

vue.js

vue-router

vue-component