使用“vue-flickity”轮播/滑块离开路线时如何停止 FOUC？答案

【问题标题】：How to stop FOUC when leaving route with 'vue-flickity' carousel/slider?使用“vue-flickity”轮播/滑块离开路线时如何停止 FOUC？
【发布时间】：2019-09-27 16:19:08
【问题描述】：

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

我尝试将其包装在 <keep-alive> 中，但这没有帮助。

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

我还尝试使用beforeRouteLeave()，将opacity 上的<Flickity ref="mySlider" /> 转换为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，所以我正在寻找一些有关方向的指导。

【问题讨论】：

标签： vue.js vue-component vue-router fouc

【解决方案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)
}

【讨论】：