目录
transtion内置组件
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
<transition :name="animation">
//里面可以放置组件
</transition>
简单来说，就是transtion组件所包裹的内容，在执行创建销毁，消失出现，动态切换的场景时，会被添加上过渡效果
过渡效果的不同时期
简单的转场动画
实现思路：
页面切换的过程，其实就是老页面销毁 (隐藏) 到新页面创建 (显示) 的过程，我们给这个过程加上过渡效果，增加一个左右平移的动画，是页面更加生动形象！
大概效果：
当前页面跳转到其他页面，页面会整体水平向左向右偏移；
实现步骤
1. 给路由容器router-view包裹上transtion组件，使其在切换的时候会加载过渡效果
//name指定过渡所执行的动画，动态绑定是为了切换不同的转场动画
<transition :name="animation">
//router-view加上绝对定位效果，默认居于左上角
<router-view class="router"></router-view>
</transition>
<style>
.router {
position: absolute;
left: 0;
top: 0;
}
</style>
2. 设计动画的过渡效果
//左滑动画和右滑动画
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.8s ease;
position: absolute;
}
.slide-left-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-left-leave-to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-right-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-right-leave-to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
3. 给不同的页面设置层级，作为左滑右滑的判断
const routes = [
{
path: "/",
name: "Home",
component: Home,
children: [
{
path: "/",
//index代表当前页面层级
meta: {
index: 1 },
component: () => import("../views/index/index.vue"),
},
{
path: "/my",
meta: {
index: 1 },
component: () => import("../views/my/my.vue"),
},
],
},
//跳转详情
{
path: "/classDetail",
meta: {
title: "课程详情", index: 2 },
component: () => import("../views/class/classDetail.vue"),
},
//老师详情
{
path: "/teacherDetail",
meta: {
title: "讲师详情", index: 2 },
component: () => import("../views/index/child/Details.vue"),
}
]
4. 监听路由信息，根据要跳转的页面层级和当前的页面层级，来决定执行左滑效果还是右滑效果；一般来说，进入页面为右滑，离开为左滑
扫描二维码关注公众号，回复：
12598034 查看本文章
watch: {
$route (to, from) {
if (to.meta.index > from.meta.index) {
//设置动画名称
this.animate = 'slide-left';
} else {
this.animate = 'slide-right';
}
}
},
data () {
return {
animate: ''
}
},
小细节：
取消动画效果产生的系统滚动条
html{
overflow: hidden;
}
升级版——引入动画库
写动画这么麻烦的事情，给其他人做岂不是更好 —— 头发茂密的程序员
你可以选一个css动画库，我第一次找到的是animate.css动画库；里面很多动画精妙绝伦（花里呼哨）
使用方式如下；
先获取动画，你可以npm安装
npm install animate.css --save
也可以直接下载
animate动画github
人家官网在这可以看演示效果
animate官网
动画类名
项目中使用
//老规矩，你可以使用transtion包裹v-show/v-if的组件，也可以报包裹路由容器，如有必要，记得给容器加上绝对定位使其脱标。
<transition name="fade"> //动画名指定为fade，没有使用动态切换
<router-view></router-view>
</transition>
<script>
//完整引入
//import '../css/animate.css'
//我还尝试了按需引入，发现 这tm也能行
//import {fadeInRight} from '../assets/css/animate.css'
</script>
<style>
//进入到动画类名
.fade-enter-active{
//执行的动画效果，绑定上那个动画类名 设置时间
animation: fadeInRight 1.5s ease;
}
//这是我们需要的css动画，你可以把它找出来复制在这
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
</style>