1

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

我已经尝试将它包装在 a 中<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，所以我正在寻找一些关于方向的指导。

4

1 回答 1

0

我发现实现这一点的最佳方法是在组件上使用 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)
}
于 2019-12-19T11:31:43.267 回答