杨标的博客

菜单

vue过渡动画的使用

Administrator
发布于 2021-11-18 / 5268 阅读 / 0 评论 / 0 点赞

vue过渡动画的使用

vue过渡动画的使用

一、vue过渡动画transtion

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的过渡动画</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div id="app">
        <button type="button" @click="isShow=!isShow">切换</button>
        <div v-show="isShow" class="box"></div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        }
    })
</script>
</html>

在上面的代码不如，我们可以看到，当我们去改变isShow的时候， 盒子box在隐藏与显示，那么，我们能不能让这个盒子在隐藏与显示的时候执行一些特殊的动画效果呢？

在vue的内部是可以直接进行的，vue的内部自带动画管理机制，在vue的内部是可以直接使用过渡的效果，它内部封装了一个<transition>的组件，可以让元素在进入/离开的时候执行特定的过渡效果

<transition>
    <div v-show="isShow" class="box"></div>
</transition>

在上面的代码里面，我们将box使用<transition>进行包裹，box就可以执行动画了，但是我们并没有看到效果，原因是因为transiton的使用要进行相关的设置

box是需果隐藏与显示的，所以我们可以把这个盒子的隐藏与显示分为四个阶段，二个过程

  1. 隐藏之前
  2. 隐藏之后
  3. 显示之前
  4. 显示之后

image.png

上面就是vue中<transition>的过渡图，然后我们根据图片上面的提示得到了上面的代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的过渡动画</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: deeppink;
        }
        /* 假设现在我们希望这个盒子在这里执行的是淡入淡出 */
        /* 离开之前 */
        .fade-leave{
            opacity: 1;
        }
        /* 离开以后 */
        .fade-leave-to{
            opacity: 0;
        }
        /* 进入之前 */
        .fade-enter{
            opacity: 0;
        }
        /* 进入以后 */
        .fade-enter-to{
            opacity: 1;
        }
        /* 进入的过程 */
        .fade-enter-active{
            transition: all 1s linear;
        }
        /* 离开的过程 */
        .fade-leave-active{
            transition: all 1s linear;
        }
    </style>
</head>

<body>
    <div id="app">
        <button type="button" @click="isShow=!isShow">切换</button>
        <transition name="fade">
            <div v-show="isShow" class="box"></div>
        </transition>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        }
    })
</script>
</html>

在上面的代码里面，我们可以将CSS进行简化

/* 假设现在我们希望这个盒子在这里执行的是淡入淡出 */
/* 进入之前,离开以后 */
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

/* 离开之前,进入以后 */
.fade-levae,.fade-enter-to{
    opacity: 1;
}
/* 进入的过程,离开的过程 */
.fade-enter-active,.fade-leave-active{
    transition: all 1s linear;
}
  1. v-enter代表进入之前
  2. v-enter-to代表进入以后
  3. v-leave代表离开以前
  4. v-leave-to代表离开以后

而上面的4个状态会形成2个过程，分别是进入的过程与离开的过程

  1. v-enter-active进入的过程
  2. v-leave-active离开的过程

前面的v指的是在<transition>组件上面的name属性值

二、多元素同时执行过渡动画transition-group

如果需要在多个元素上面同时执行过渡效果，则需要使用<transitoin-group>

在这里还有一个小小的注意事项，如果有多个组件同时执行过的时候，则要使用<transition-group>去实现

<transition-group tag="div" class="img-box">
    <img v-show="currentIndex==0" src="./img/item1.jpg" :key="0" alt="">
    <img v-show="currentIndex==1" src="./img/item2.jpg" :key="1" alt="">
    <img v-show="currentIndex==2" src="./img/item3.jpg" :key="2" alt="">
    <img v-show="currentIndex==3" src="./img/item4.jpg" :key="3" alt="">
</transition-group>

<transition-group>默认情况下会帮我们生成一个span标签，但是我们仍然可以通过设置tag来生成指定的标签

transition案例

我们现在使用transition来完成一组左右切换的过程，这个过程后期会有项目当中的页面切换里面去使用

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的过渡动画</title>
    <style>
        .img-box {
            width: 639px;
            height: 426px;
            border: 2px solid black;
            position: relative;
        }

        .img-box>img {
            position: absolute;
            left: 0px;
            top: 0px;
        }

        /* 编写vue的过滤动画  */
        /* 进入之前,离开以后 */
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        /* 进入之后,离开之前 */
        .fade-enter-to,.fade-leave{
            opacity: 1;
        }
        .fade-enter-active,.fade-leave-active{
            transition: all 0.5s linear;
        }
    </style>
</head>

<body>
    <div id="app">
        <transition-group name="fade" tag="div" class="img-box">
            <img v-show="currentIndex==index" :src="item" v-for="(item,index) in imgList" :key="index" alt="">
        </transition-group>
        <button type="button" @click="currentIndex--">
            <--前</button>
                <button type="button" @click="currentIndex++">后-->
        </button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            currentIndex: 0,
            imgList: [
                "./img/item1.jpg",
                "./img/item2.jpg",
                "./img/item3.jpg",
                "./img/item4.jpg"
            ]
        },
        watch: {
            currentIndex(newValue, oldValue) {
                if (newValue > 3) {
                    this.currentIndex = 0;
                } else if (newValue < 0) {
                    this.currentIndex = 3;
                }
            }
        }
    })
</script>

</html>

在上面的代码里同，我们通过最基本的transition-group实现了淡入淡出的轮播图效果

案例

通过vue的过渡动画，实现一个滚动的轮播效果

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的过渡动画</title>
    <style>
        .img-box {
            width: 639px;
            height: 426px;
            border: 2px solid black;
            position: relative;
            overflow: hidden;
        }

        .img-box>img {
            position: absolute;
            left: 0px;
            top: 0px;
        }

        /* 第一组效果，从右向左  */
        /* 进入之前 */
        .slide-left-enter {
            transform: translateX(100%);
        }

        .slide-left-enter-to,
        .slide-left-leave {
            transform: translateX(0);
        }

        /* 离开以后 */
        .slide-left-leave-to {
            transform: translateX(-100%);
        }

        .slide-left-enter-active,
        .slide-left-leave-active {
            transition: all 0.5s linear;
        }

        /* 第二组效果 从左向右*/
        .slide-right-enter{
            transform: translateX(-100%);
        }
        .slide-right-enter-to,
        .slide-right-leave{
            transform: translateX(0);
        }
        .slide-right-leave-to{
            transform: translateX(100%);
        }
        .slide-right-enter-active,
        .slide-right-leave-active {
            transition: all 0.5s linear;
        }
</style>
</head>

<body>
    <div id="app">
        <!--这里的name由一个固定的值变成了一个动态的值 -->
        <transition-group :name="dir" tag="div" class="img-box">
            <img v-show="currentIndex==index" :src="item" v-for="(item,index) in imgList" :key="index" alt="">
        </transition-group>
        <button type="button" @click="dir='slide-right';currentIndex--">
           <--左箭头
        </button>
        <button type="button" @click="dir='slide-left';currentIndex++">
            右箭头-->
        </button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            currentIndex: 0,
            imgList: [
                "./img/item1.jpg",
                "./img/item2.jpg",
                "./img/item3.jpg",
                "./img/item4.jpg"
            ],
            dir:"slide-left"
        },
        watch: {
            currentIndex(newValue, oldValue) {
                if (newValue > 3) {
                    this.currentIndex = 0;
                } else if (newValue < 0) {
                    this.currentIndex = 3;
                }
            }
        }
    })
</script>

</html>

三、transition的钩子函数

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

四、总结

在vue的内部，有一些自带的组件

  1. router-link跳转页面
  2. router-view根据路径显示页面
  3. transitioin执行单个元素的过渡动画
  4. transition-group执行多个元素以的过渡动画

关于过渡的总结

  1. 2个过程，进入的过程enter-active，离开的过程leave-actkve
  2. 4个状态，进入之前enter，进入之后enter-to，离开之前leave,离开之后leave-to
  3. 多个元素一定要使用transition-group，要在子元素上面指定key
  4. transform-group默认生成的是span标签，如果希望生成其它的标签，可以使用tag

五、补充Animate.css的使用

在现在框架里面，有很多第三方的动画库，我们常用的一个动画库是animate.css，这个动画库可以与vue进行完美的结合

  1. 安装

    $ yarn add animate.css

  2. 导入到系统当中

     <link rel="stylesheet" href="./css/animate.css">

  3. 使用

     <transition-group
                   enter-active-class="animate__animated animate__bounceInRight"
                   leave-active-class="animate__animated animate__rotateOutUpLeft"
                   tag="div" class="img-box">
     <img v-show="currentIndex==index" :src="item" v-for="(item,index) in imgList" :key="index" alt="">
</transition-group>
vue框架中的key详解
vuex全局状态管理

评论