How to use keep-alive with transition in Vue?

how to use keep-alive with transition in Vue?

I am now switching between left and right with the effect of sliding left and right

clipboard.png

clipboard.png


transition

clipboard.png

           <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>

how can I solve the problem if I add my animation in this way?

Mar.21,2021

did not solve six months ago, six months later this new company project, finally found a solution to the problem, the perfect solution to this problem, can only be a transition package keepalive, just keepalive inside a bit special, using two transition will lead to animation overlap, tried six months ago, next time if you have time, write an article.
address: https://blog.csdn.net/a137069.


you can try include, but in the course of trying, I found that animation is fine, but keepalive is not working. Don't you know if you have found a solution now?


transition package look in keep-alive


keep-alive doesn't work. Still no cache

Menu