Vue页面切换效果的气泡增强(推荐)

CodePen地址

在前端使用SPA后，我们可以获得更多的控制，比如页面切换动画。我们在使用后端页面的时候可能达不到上面的效果，或者在做的时候会有明显的闪屏。因为所有资源都需要重新加载。

今天，我们用vue，vue-router和animejs来解释上述效果是如何实现的。

步骤

点击菜单，生成Bubble，开始执行入口动画页面跳转，执行出口动画函数调用组件

我希望效果是通过一个对象调用，而不是v-show和v-if这样的指令，为了保持统一，我们还是用Vue来写组件。我通常使用新的Vue根节点来实现独立于业务组件的效果。

让实例=null function create service(Comp){//.返回新的Vue({ //.}).$ children[0]}函数getInstance(){ instance=instance | | createServices(bulletransitioncomponent)返回实例} const BubbleTransition={ scalein :()={ return getInstance()。animate('scaleIn') }，Fadeout :()={ return getinstance()。动画化('淡出')}}然后实现起泡过渡组件，然后是起泡过渡。放大和放大。横向扩展将正常工作。Animejs可以监听动画执行结束的事件。动漫()。完成获取Promise对象。

template div class=' transition-bubble ' span v-show=' animating ' class=' bubble ' id=' bubble '/span/div/templatescript import anime from ' animeejs ' export default { name : ' transition-bubble '，data(){ return { animei : false，animeobjss 3360[]} }，methods: { scaleIn(选择器='#bubble '，{duration=800，easy=' linear ' }={ }){//this . animebjs . push(已完成)}，fadeOut(选择器='#bubble '，{duration=300，easy=' linear ' }={ }){//.}，resetanimebjs(){ this . animeobjs . reset(). this . animeobjs=[]}，animate (action，Then reset) {return this [action]()。然后(()={this。resetanimeobjs ()})}}最初的想法是在路由器配置中给特定的路由元添加一个标签，并判断该标签在beforeEach other时应该是动画的。然而，这种方法不够灵活。而是用hash标记，结合Vue-router，切换时会重置Hash。

router-link class=' router-link ' to='/# _ _ BUBBLE _ _ TRANSITION _ _ ' Home/router-link const BUBBLE _ TRANSITION _ IDENTIFIER=' _ _ BUBBLE _ _ TRANSITION _ _ ' router . before每一个((to，from，next)={ if(to . hash . indexof(BUBBLE _ TRANSITION _ IDENTIFIER)0){ const redirectTo=object . assign({ }，to)redirectTo . hash=' ' BUBBLE TRANSITION . scalein()。然后(()=next(redirectTo))} else { next()} })router . after each((to，From)={BubbleTransition。Fadeout ()})酷炫的动画瞬间就能抓住用户的眼球，我经常在访问一些网站的时候发出来。卧槽，太酷了！感叹。也许最终实现不需要几行代码，所以您可以自己完成。下次设计师提出不合理的动画要求，你可以假装强制。我可以在几分钟内做出这种效果，但我认为这里不应该使用* *动画，这不符合用户的心理预期。

CodePen地址

摘要

以上是边肖介绍的Vue页面切换效果的BubbleTransition(推荐)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！