vue动画初体验

目录

transtion
简单转场动画
引入动画库

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. 监听路由信息，根据要跳转的页面层级和当前的页面层级，来决定执行左滑效果还是右滑效果；一般来说，进入页面为右滑，离开为左滑

 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>
 

vue3动画

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <transition :name="slide">
          <component :is="Component" />
        </transition>
      </keep-alive>
    </router-view>
  </div>
</template>

<script>

import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'app',
  setup (props) {
    const router = useRouter()
    const route = useRoute()
    const slide = ref('slide')
    //监听器
    watch(route, () => {
      // console.log(route.meta);
      slide.value = route.meta.index == 1 ? 'slide-right' : 'slide-left'
    })
    return {
      slide
    }
  }

}
</script>

<style lang="stylus">
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.router-view{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active{
    height: 100%;
    will-change: transform;
    transition: all 500ms cubic-bezier(.55,0,.1,1);
    position: absolute;
    backface-visibility: hidden;
}
.slide-right-enter-active{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter-active{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>

router中需要对页面mate设置index，用以判断向左向右滑动

[{
    path: '/myPage',
    name: 'MyPage',
    component: () => import('@/views/MyPage.vue'),
    meta: { index: 1 }
},
{
    path: '/mySecondPage',
    name: 'MySecondPage',
    component: () => import('@/views/MySecondPage.vue'),
    meta: { index: 2 }
}]