Vue中 keep-alive 结合 transition 怎么用呢？

Question

Vue中 keep-alive 结合 transition 怎么用呢？

我现在是左右切换有左滑右滑的效果的

现在有部分页面需要缓存，所以我写成

                  <keep-alive>
                        <router-view v-if="$route.meta.keepAlive">
                        </router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive"></router-view>
                    

现在我的transition怎么加进入呢？

           <transition :name="transitionName">
                    <keep-alive>
                        <router-view v-if="$route.meta.keepAlive">
                        </router-view>
                    </keep-alive>
            </transition>
                    
            <transition :name="transitionName">
                    <router-view v-if="!$route.meta.keepAlive"></router-view>
            </transition>

这样加进去我的动画就没有了 怎么解决呢？

Answer 1

半年前没解决，半年后这次新写公司项目，终于找到了解决的写法，完美解决了这个问题，只能是一个transition包keepalive，只是keepalive里面写法有点特别，用两个transition会导致动画重叠，半年前试过了，下次如果有时间，写个文章。
解决地址：https://blog.csdn.net/a137069...

Answer 2

可以试试一下 include 但是我在尝试的过程中发现 搞的话动画没问题了但是 keepalive 又不行了,不知道你现在找到解决的办法了吗?

Answer 3

transition 包在keep-alive中看看

Answer 4

keep-alive 不管用啊，还是没有缓存