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>

	<!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>

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