Vue 动态组件强制<过渡出现>在页面刷新时触发

Question

我在循环中使用动态<component>来呈现所有组件。页面中的第一个可见组件使用<transition name="slide-in" appear>。当导航到页面时，动画会正确触发。然而，当用户刷新页面时，动画会再次触发。当我不使用该组件时，此行为不会发生。

<div 
class="component-wrapper
v-for="(slice, index) in slices"
>
<component
:is="slice.slice_type"
:slice="slice"
:key="index
/>
</div>

有没有办法调整这种行为?

欢呼,

Answer 1

appear道具导致在初始渲染时运行过渡，并且每当用户刷新页面时都呈现组件。如果你想在初始渲染时运行过渡，但在播放后将其关闭，你可能想要绑定到一些变量:appear='first'，然后使用@after-appear在第一个页面加载后将其设置为false。

<template :appear="first" @after-appear="rendered">

为了确保记住变量的初始值，您可以将其放入您的vuex存储中，并使用getter和指示转换已经运行的mutation/action来访问它。

first () { return store.getters.first_render }
rendered () { store.dispatch('falsify_first_render') }