使用了很多动画效果，给大家介绍4款非常好看的Veu路由转场动画效果！_0

作者：Ahmadshaded译者：前端小智来源：sitepoint有梦想，有干货，微信搜索【伟大的走向世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。VueRoutertransitions是一种快速简便的方式，可以为您的Vue应用程序添加个性。它允许我们在应用程序的不同页面之间添加流畅的动画/过渡。如果使用得当，它可以使我们的应用程序更加现代和专业，从而提升用户体验。在今天的文章中，我们将介绍使用VueRouter进行过渡的基础知识，然后是一些基本示例，希望能给您一些启发和启发。下面是我们要创建的四个过渡页面。将Vue路由转换添加到您的项目通常情况下，Vue路由器设置看起来像这样包装。然而，在新版本的VueRouter中，我们必须使用v-slot来解构我们的props并将它们传递给我们的内部插槽。这个慢包含一个被转换包围的动态组件。每个Route都有不同的transition默认情况下，使用Wrappinga和将在我们使用的每条路线上添加相同的过渡。有两种不同的方法可以为每条路线定制过渡。将过渡移动到单独的组件部分首先，我们可以将移动到每个单独的组件中，而不是用组件包装我们的动态组件。如下：//app.vue对于每个路由我们都希望有一个Transition效果，这样我们就可以通过转换的名称自定义每条路线。使用v-bind的动态转换的替代方法是将转换的名称绑定到一个变量。然后我们可以根据侦听路由动态更改此变量。watch:{'$route'(to,from){consttoDepth=to.path.split('/').lengthconstfromDepth=from.path.split('/').lengththis.transitionName=toDepth为我们提供了几个在动画周期中动态添加/删除的CSS类。有6个不同的过渡类（3个用于进入，3个用于离开）。v-enter-from：定义进入转换的开始状态。元素插入前生效，元素插入后下一帧移除。v-leave-from：定义离开转换的开始状态。退出转换被触发后，它会立即在下一帧被删除。v-enter-active：定义进入转换激活时的状态。在整个进入过渡阶段应用，在插入元素之前应用，并在过渡/动画完成后移除。此类可用于将处理时间、延迟和曲线函数定义为转换。v-leave-active：定义离开转换激活时的状态。在整个退出过渡阶段应用，在触发退出过渡时立即应用，并在过渡/动画完成后移除。此类可用于定义离开转换的处理时间、延迟和曲线函数。v-enter-to：定义进入转换的结束状态。在插入元素后应用下一帧（同时移除v-enter-from），在过渡/动画完成后移除。v-leave-to：离开转换的结束状态。在离开过渡被触发后应用下一帧（同时v-leave-from被移除），在过渡/动画完成后被移除。注意：当我们为转换提供名称属性时，这是默认名称。类的格式是name-enter-from、name-enter-active等。我们希望进入和离开状态的不透明度为0。然后，在我们的过渡生效时为不透明度设置动画。//淡入淡出样式！.fade-enter-active,.fade-leave-active{transition:opacity0.5sease;}.fade-enter-from,.fade-leave-to{opacity:0;}Finaleffect:2–SlideVueRouterTransitions我们要构建的下一个过渡是幻灯片过渡。该模板如下所示。因为我们希望进入和离开转换同时发生，所以默认模式就可以了。//slidetransition做例子more看起来不错，我们给每个页面添加如下样式：//componentwrapper.wrapper{width:100%;min-height:100vh;}最后，为过渡样式中要滑动的组件设置相关属性。如果您需要不同的滑动方向，只需更改CSS属性（顶部、底部、左侧、右侧）。//幻灯片样式！.slide-enter-active,.slide-leave-active{transition:all0.75sease-out;}.slide-enter-to{position:absolute;right:0;}.slide-enter-from{position:absolute;右：-100%；}.slide-leave-to{位置：绝对；左：-100%；}.slide-leave-from{位置：绝对；left:0;}Thefinaleffect:3-ScaleVueRouterTransitions创建与我们的淡入淡出过渡非常相似的缩放过渡。我们再次将模式设置为out-in，以确保动画顺序正确。//缩放转换！.scale-enter-active,.scale-leave-active{transition:all0.5sease;}.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(0.9);}在这里给整个页面一个黑色的背景颜色会让过渡看起来更干净。4-结合VueRouterTransitions创建transitions的方法有很多很多，但我认为刻意做transitions也不过分。过渡动画应该是小而微妙的增强功能，而不是应用程序中分散注意力的元素。我认为实现更好的过渡是一些更基本的过渡的组合。例如，让我们将幻灯片放映放大和缩小合并为一个过渡。.scale-slide-enter-active,.scale-slide-leave-active{位置：绝对；过渡：所有0.85秒缓动；}.scale-slide-enter-from{left:-100%;}.scale-slide-enter-to{left:0%;}.scale-slide-leave-from{transform:scale(1);}.scale-slide-leave-to{transform:scale(0.8);}~终于，我是个聪明的保龄球手，我要去洗碗了，下次见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://learnue.co/2021/01/4-...交流文章每周更新，可微信搜索【大千世界】第一时间阅读，回复【福利】】还有很多前端视频等着你，本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，欢迎Star。