【学习前端第六十四课】vue过渡动画的使用

最新推荐文章于 2024-05-23 19:22:50 发布

-Wake-

最新推荐文章于 2024-05-23 19:22:50 发布

阅读量994

点赞数 26

分类专栏：【前端】入门到就业文章标签：前端学习 vue.js

本文链接：https://blog.csdn.net/weixin_65729202/article/details/135691986

版权

【前端】入门到就业专栏收录该内容

79 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Vue中使用过渡动画，包括基本的v-show配合transition组件实现元素显示隐藏效果，以及如何配置不同状态的过渡效果，如淡入淡出、平移等，以及如何在多个元素上同时执行动画。

摘要由CSDN通过智能技术生成

vue过渡动画的使用

vue过渡动画transition

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
   <div id="app">
    <button type="button" @click="isShow=!isShow">切换</button>
    <div class="box" v-show="isShow"></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 class="box" v-show="isShow"></div>
</transition>

上面的代码里面，我们用transition组件包裹了box，但是还是没有看到效果，因为我们还没有进行相关的transition配置

box现在是需要显示隐藏的，所以我们可以看作盒子的显示隐藏分为4个状态，2个阶段

1、隐藏前

2、隐藏后

3、显示前

4、显示后

然后我们根据上面的4种状态来给样式，从而对过渡效果的动画进行配置

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background:red;
        }
        /*隐藏前*/
        .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 class="box" v-show="isShow"></div>
    </transition>    
   </div> 
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>
</html>

代码分析：

在vue动画种，我们通过固定的类名，来给需要添加过渡动画的组件，赋予以上我们讲的4种状态下的样式

1、v-enter 代表进入之前

2、v-enter-to 代表进入之后

3、v-leave 代表离开之前

4、v-leave-to 代表离开之后

上面是4种状态下的样式设置时使用的类名

两种切换的过程

1、v-enter-active 进入的过程

2、v-leave-active 离开的过程

上面所有的类名v的部分是根据你设置transition组件的name属性来决定

上面的样式代码可以做进一步简化，因为我们设置的很多状态下的样式是一样的

.fade-leave,.fade-enter-to{
    opacity: 1;
}
.fade-leave-to,.fade-enter{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active{
    transition: all 1s linear;
}

多个元素同时执行过渡动画

如果说要在多个元素上面执行过渡动画，需要使用 transition-group

transition-group默认情况下会帮我们生成一个span标签，我们可以通过tag属性来设置生成指定的标签

transition案例

我们现在使用transition来完成一组左右切换的过程，这个过程后期象中会用在页面切换上面

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .img-box{
            width:500px;
            height:200px;
            border:solid 1px #000;
            position: relative;
            overflow: hidden;
        }
        .img-box>img{
            width:480px;
            height:180px;
            position: absolute;
            left:0;
            top:0;
        }
        .img-box>img:nth-of-type(1){
            border:solid 10px red;
        }
        .img-box>img:nth-of-type(2){
            border:solid 10px blue;
        }
        .img-box>img:nth-of-type(3){
            border:solid 10px green;
        }
        .img-box>img:nth-of-type(4){
            border:solid 10px orange;
        }

        /*向左移动效果组*/
        .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 .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 .5s linear;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition-group :name="dir" tag="div" class="img-box">
            <img v-for="(item,index) in imgList" :src="item" :key="index" v-show="currentIndex==index" alt="">
            <!-- 
                <img src="./img/item1.jpg" v-show="currentIndex==0" alt="" >
                <img src="./img/item2.jpg" v-show="currentIndex==1" alt="" >
                <img src="./img/item3.jpg" v-show="currentIndex==2" alt="" >
                <img src="./img/item4.jpg" v-show="currentIndex==3" alt="" >
             -->
        </transition-group>
        <button type="button" @click="dir='slide-left';currentIndex--">左</button>
        <button type="button" @click="dir='slide-right';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>

-Wake-

关注

26
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【学习前端第六十四课】vue过渡动画的使用

在vue内部是可以直接设置的，vue内部自带动画管理机制，在vue的内部是可以直接执行过渡效果的，它内部封装了一个叫做 transition 组件，可以让元素在进入 / 离开的时候执行特定的过渡效果。在上面的代码当中，我们通过改变isShow的值，从而控制box的显示与隐藏，那么，如恶化让盒子在显示隐藏的过程中执行特殊效果。在vue动画种，我们通过固定的类名，来给需要添加过渡动画的组件，赋予以上我们讲的4种状态下的样式。上面的样式代码可以做进一步简化，因为我们设置的很多状态下的样式是一样的。
复制链接

扫一扫