Как остановить FOUC при выходе из маршрута с каруселью / слайдером vue-flickity? - PullRequest
Новая
       30

Как остановить FOUC при выходе из маршрута с каруселью / слайдером vue-flickity?

1 голос
/ 27 сентября 2019

Я использую пакет vue-flickity для Flickity MetaFizzy в моем приложении Vue.При переходе от маршрута, в котором есть экземпляр ползунка 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()
        }
      }
    }
  ]
})

Это правильный подход, или я должен подходить к этому по-другому?

Кроме того, если бы был способ сделать это глобально для всех <Flickity /> экземпляров на всех маршрутах без указания refs, это также было бы полезно.

Я не былиспользовать Vue в течение этого долгого времени, поэтому я ищу некоторые указания о том, как выбрать направление.

...