Vue中如何实现列表动画

Vue
88
0
0
2024-03-24
标签   Vue实践

前面给大家介绍了动画的基本使用,本文我们来实现一个动画的简单案例,效果如下

在这里插入图片描述

Vue动画案例

1.基础页面

最基础的页面如下:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-">
    <meta name="viewport" content="width=device-width, initial-scale=.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-.4.0.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        })
    </script>
</body>
</html>

2.添加数据

添加一个基本的列表数据,此处使用到 v-for 指令来循环取数据

在这里插入图片描述

效果:

在这里插入图片描述

3.设置样式

给 li 标签设置对应的样式。

 <style>
    li{
        border:px dashed red;
        margin-top:px;
        line-height:px;
        padding-left:px;
    }
</style>

效果

在这里插入图片描述

4.添加背景动画

给列表数据添加一个鼠标滑过的 hover 动画效果

 <style>
    li{
        border:px dashed red;
        margin-top:px;
        line-height:px;
        padding-left:px;
    }
    /*鼠标滑过的动画*/    li:hover{
        background-color: aquamarine;
        transition: all.8s ease;
    }
</style>

效果

Vue中如何实现列表动画

在这里插入图片描述

5.添加数据

增加一个给列表添加数据功能,之前已经实现过了,代码如下

Vue中如何实现列表动画

在这里插入图片描述

Vue中如何实现列表动画

在这里插入图片描述

效果

Vue中如何实现列表动画

在这里插入图片描述

6.添加数据动画

上面的效果功能是实现了,但是效果比较生硬,我们可以加上动画效果,要使用动画之前我们使用的是 transition 标签,但是现在是在 v-for 中循环遍历的多个 li 标签中 我们需要使用 transition-group 标签来包裹.

Vue中如何实现列表动画

在这里插入图片描述

动画代码

Vue中如何实现列表动画

在这里插入图片描述

效果

Vue中如何实现列表动画

在这里插入图片描述

有了一个列滑动入场的效果~

7.删除数据

当我们点击某行数据的时候将这行移除掉,先给 li 绑定一个点击事件,然后del方法中移除当前行

Vue中如何实现列表动画

在这里插入图片描述

效果

Vue中如何实现列表动画

在这里插入图片描述

如上,移除有些停顿,不是太好,我们可以加如下两个动画来实现。

Vue中如何实现列表动画

在这里插入图片描述

效果

Vue中如何实现列表动画

在这里插入图片描述

移除一个列的时候,下面的列有往上飘的效果~

8.appear和tag属性

我们在刷新页面,第一次进来的时候,列表没有入场动画,这时我们可以添加一个 appear属性来设置

在这里插入图片描述

最后 transition-group中还有一个 tag属性,用来设置包裹的标签,先来看没有tag的效果

在这里插入图片描述

我们使用tag属性来试试

在这里插入图片描述

在这里插入图片描述

这样就没有 span 中间的 标签了。

最后完成的代码如下:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-">
    <meta name="viewport" content="width=device-width, initial-scale=.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/ Vue -2.4.0.js"></script>

    <style>
        li{
            border:px dashed red;
            margin-top:px;
            line-height:px;
            padding-left:px;
        }
        /*鼠标滑过的动画*/        li:hover{
            background-color: aquamarine;
            transition: all.8s ease;
        }

        /**动画初始和结束的时候*/        .v-enter
        ,.v-leave-to{
            opacity:;
            transform: translateY(px);
        }

        /**入场和离场中*/        .v-enter-active,
        .v-leave-active{
            transition: all.8s ease;
        }

        /* .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */        .v-move {
            transition: all.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>

            <label>
                Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>

        <!--<ul>-->
            <transition-group appear tag="ul">
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                    {{item.id}} ---- {{item.name}}
                </li>
            </transition-group>
         <!--</ul>-->
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                list:[
                    {id:,name:"java"},
                    {id:,name:"Vue"},
                    {id:,name:"Php"},
                    {id:,name:"c#"}
                ]
            },
            methods: {
                add(){
                    this.list.push({id:this.id,name:this.name})
                    this.id=this.name=''
                },
                del(i){
                    this.list.splice(i,)
                }
            }
        })
    </script>
</body>
</html>