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

Question

我在我的Vue应用程序中使用了MetaFizzy的Flickity的vue-flickity包。当导航离开具有滑块实例vue-flickity路线时，您会得到一个简短的 FOUC，显示文档中所有未设置样式的幻灯片，因为<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)
}