Question

我有SPA应用程序，可通过vue-router更改视图。一切正常，但是我想使用过渡标记来平滑地浏览路线。但是我不想为整个页面设置动画，只是某些组件。我还使用GSAP TweenMax进行动画处理，而不是纯CSS。模板如下所示：

App.vue：

<template>
    <div id="container" ref="container">
            <gameHeader></gameHeader>
            <router-view ref="router"/>
    </div>
</template>

其中一种观点：

<transition name="custom" mode="out-in" @enter="enter" @leave="leave">
<div id="containerContent" v-show="mounted">
    <div id="gameContent">
    </div>
</div>
</transition>

和该视图的脚本：

mounted() {
    this.mounted = true;
},
methods: {
    enter:function(el, done){  
        console.log('starting enter', el, this.$refs)
        TweenMax.fromTo(el, 1, {opacity: 0}, { opacity: 1, onComplete: function() { console.log('finish enter'); done} });
    },
    leave: function(el, done) {
        console.log('starting leave', el, this.$refs)
        TweenMax.to(el, 1, {opacity: 0, onComplete: function() { console.log('finish leave'); done}})
    },
},
data() {
   return {
      mounted: false;
  }
}

所有路线都具有相似的结构。您可能会在这里注意到this.mount变量，该变量对于更改已安装的生命钩是必需的，因此将触发转换。另外还有console.logs，以便它们通知何时以及是否进入和离开。问题在于，从未调用“ leave”方法。可能是因为在发生重新路由时，路由器视图中的所有组件都被立即破坏了，因此不再有时间运行“离开”了。

我可以将router-view标签放入包装的过渡标签中，但是router-view在不同视图中是不同的，并且我确实希望有不同的动画，而不是取决于整个router-view，而是某些组件。

有一个想法可以解决这个问题，但是我认为这远非一个好的解决方案：每个“ leave”方法都调用onComplete this。$ route.replace（）函数，以便在动画完成后进行真正的重新路由。这相当复杂，因为在一个视图中可能有多个过渡组件，并且它们之间可能存在一些竞争-一个组件可能比其他组件更早完成，并且可能应通过Promieses进行重新路由。您是否有更好但更简单的解决方案来解决此过渡问题？

由于重新路由，组件的Vue.js过渡

0 个答案: