vue路由过渡动画,vue-router动态路由怎么定义
E-route transition是增加Vue节目个性化效果的一种快速简单的方法。本文主要介绍了Vue的四种方法来实现进路转换的动态效果。有兴趣的可以看看。
Vue路由转换是增加Vue节目个性化效果的一种快速简单的方法。允许您在程序的不同页面之间添加平滑的动画和过渡。如果使用得当，它可以让你的程序看起来更专业，从而增强用户体验。
本文将首先介绍使用Vue进行路由过渡的基础知识，然后举几个例子给你一些启发。以下是其中一个案例：
在 Vue 程序中添加路由
常规Vue路由设置如下：
模板
路由器-视图/
/模板
在Vue路由的旧版本中，我们可以简单地用转换组件包装路由器视图。
但是，在新版本的Vue路由中，我们必须用v槽解构道具，并将其传递给我们的内部槽。这将包含一个动态组件，它被转换组件所包围。
路由器视图v-slot=“{ Component }”
过渡
组件：is=Component /
/过渡
/路由器-查看
为路由添加过渡
默认情况下，用过渡包装组件会将相同的过渡添加到您应用的每条路线中。
有两种方法可以自定义每条路线的过渡效果。
将过渡移到每个组件中
首先，我们可以将转换移动到每个单独的组件，而不是用转换组件包装我们的动态组件。像这样：
模板
过渡
div class=wrapper
！- -
/div
/过渡
/模板
以此类推，处理每个要转换的路由。这样，可以通过修改转换名称来定制每条路线。
用 v-bind 进行动态过渡
另一种方法是将转换的名称绑定到变量。然后可以根据自己的路径动态修改这个变量。
这是来自Vue路由文档的一个示例。使用观察模式在当前路线上动态设置transitionName变量。
过渡：name=transitionName
组件：is=Component /
/过渡
观察：{
$route(目的地，出发地){
const toDepth=to.path.split(/)。长度
const from depth=from . path . split(/)。长度
this . transition name=to depth from depth？“向右滑动”:“向左滑动”
}
}
现在我们已经了解了Vue路由转换的基础知识，让我们来看一些例子。
#1 渐变过渡
页面过渡应该是最直接的动态效果。这可以通过修改元素的透明度来实现。
首先，创建一个名为fade的过渡。请注意，过渡模式设置为out-in。
共有3种过渡模式：
默认：淡入和淡出过渡同时发生。
In-out:新元素先淡入。然后当前元素淡出。
Out-in:当前元素首先淡出。然后新元素开始淡入。
为了让新元素平滑淡入，我们需要在开始新的过渡之前删除当前元素。所以你得用mode=out-in 。
路由器视图v-slot=“{ Component }”
过渡名称=渐变模式=出-入
组件：is=Component /
/过渡
/路由器-查看
Transition提供了几个CSS类，可以在动画周期中动态添加或删除。
6.不同的过渡类(3个用于淡入，3个用于淡出)。
V-enter-from/v-leave-from:转换的初始状态，转换开始后删除。
V-enter-active/v-leave-active:转换的激活状态。
V-enter-to/v-leave-to:转换的结束状态
我们的淡入过渡有一个名为fade-enter-from的类。
我们希望淡入和淡出状态的透明度为0。然后，当过渡处于活动状态时，您希望制作透明度动画。
我们甚至不必将透明度设置为1，因为fade-enter-from和fade-leave-to类将在动画过程中被删除。这将使元素自身设置为默认透明度为1的动画。淡入激活。淡化-保持活动状态{
过渡：不透明度0.5s缓和；
}。淡入淡出。淡出-离开至{
不透明度：0；
}
对于一些虚拟组件，这是最终的过渡效果。
#2 幻灯片过渡
接下来是页面幻灯片过渡。
模板如下所示。因为我们希望淡入和淡出过渡同时发生，所以我们不想为过渡设置特殊的模式。
路由器视图v-slot=“{ Component }”
过渡名称=slide
组件：is=Component /
/过渡
/路由器-查看
为了让示例更容易理解，我将每个组件的宽度设置为100%，至少占用1 vh，并单独设置背景色。包装{
宽度：100%；
最小高度：100vh
}
最终的过渡样式将动画显示组件滑动的绝对位置。如果你需要不同的滑动方向，只需改变CSS属性(上、下、左、右)即可。滑入激活。滑动-保持-活动{
过渡：全0.75s缓出；
}。滑动输入到{
位置：绝对；
右：0；
}。滑入-进入-从{
位置：绝对；
右：-100%；
}。向左滑动到{
位置：绝对；
左：-100%；
}。滑离{
位置：绝对；
左：0；
}
这是最后的效果：
#3 缩放过渡
缩放过渡与渐变过渡非常相似。还需要将模式设置为out-in，这样可以保证动画的正确顺序。
路由器视图v-slot=“{ Component }”
过渡名称=缩放模式=出-入
组件：is=Component /
/过渡
/路由器-查看
然后更改透明度和变换：元素的比例和样式。缩放-输入-激活。缩放-保持活动{
过渡：全0.5s轻松；
}。规模-进入-从。缩放-左至{
不透明度：0；
变换：缩放(0.9)；
}
要使这种过渡看起来更干净，可以将整个网页的背景色设置为黑色。
这是最后的效果：
#4 组合过渡
过渡的效果有很多很多。常见的做法是将一些基本的过渡组合起来，比如将幻灯片和缩放组合成一个过渡。
路由器视图v-slot=“{ Component }”
过渡名称=scale-slide
组件：is=Component /
/过渡
/路由器-查看。缩放-滑动-输入-激活。缩放-滑动-保持活动{
位置：绝对；
过渡：全0.85s轻松；
}。scale-slide-enter-from {
左：-100%；
}。缩放-滑动-输入到{
左：0%；
}。缩放-滑动-离开{
变换：缩放(1)；
}。缩放-滑动-向左{
变换：缩放(0.8)；
}
这是最后的效果。
好看吗？
#5 写在最后
在最近推广Vue的过程中，我发现了一个备受瞩目的Vue3 TS教程。
关于Vue实现路由动态转换的四种方法，本文到此结束。更多相关Vue路由过渡动态，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。