【Vue】用transition实现简单的添加删除动画效果_vue3元素删除补位效果-程序员宅基地

技术标签: Vue笔记  vue  

效果图

参考 (过度&动画类)https://cn.vuejs.org/v2/guide/transitions.html在这里插入图片描述

注意导入动画库

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

html和Vue代码

<div id="app">
            id:<input type="text" name="" id="" placeholder="请输入id" v-model="id">
            name:<input type="text" name="" id="" placeholder="请输入姓名" v-model="name">
            age:<input type="text" name="" id="" placeholder="请输入年龄" v-model="age">
            
            <button @click="add">添加</button>
            <ul>
                <transition-group tag="ul">
                    <li v-for="(item,i) in list" :key="item.id" @click="remove(i)">{
    {
     item.id}}--------{
    {
     item.name }}--{
    {
     item.age }}</li>
                </transition-group>
            </ul>
        </div>
        <script>
            var app = new Vue({
    
                el:'#app',
                data:{
    
                    list:[
                    {
    id:1,name:'张三',age:18},
                    {
    id:2,name:'李四',age:12},
                    {
    id:3,name:'王五',age:14},
                    {
    id:4,name:'六六',age:11}
                    ],
                    id:'',
                    name:'',
                    age:null
                },
                methods:{
    
                    remove(i){
    
                        this.list.splice(i,1)
                    },
                    add(){
    
                        let temp = {
    id:this.id,name:this.name,age:this.age};
                        this.list.push(temp);

                        this.id="";
                        this.name="";
                        this.age=null;
                    }
                }
            })
        </script>

css代码

#app{
    
                margin: 0;
                padding: 0;   
            }
            #app li{
    
                list-style: none;
                width: 500px;
                line-height: 30px;
                border: 1px dashed #ccc;
                box-shadow: 2;
                font-size: 16px;
                margin: 5px;
                padding-left: 10px;
                cursor: pointer;
                }
            li:hover{
    
                background-color: aqua;
                box-shadow: 0 0 7px gray;
            }
            .v-enter,
            .v-leave-to{
    
                opacity: 0;
                transform: translateX(400px);
            }
            .v-enter-active,
            .v-leave-active{
    
                transition: all 0.5s ease;
            }
            .v-move{
    /*让元素被改变定位的时候,有一个缓动效果*/
                transition: all 0.5s ease;
            }
            .v-leave-active{
    /*表示要被删除的元素 ,让即将被移除的元素脱离标准流,这样后面的元素就能渐渐的浮动上来*/
                position: absolute;
            }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/XXch59/article/details/109519722

智能推荐

Problem——118A. String Task——Codeforces_problem 118a - string task-程序员宅基地

文章浏览阅读134次。time limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputPetya started to attend programming lessons. On the first lesson his task was to write a simpl..._problem 118a - string task

第二章、Groovy基础功能窥探_图灵 groovy-程序员宅基地

文章浏览阅读421次。文章目录1、生成代码1.1、Groovy 代码注释1.2、编译Groovy代码和java语法1.3、简洁之美2、assertion 断言探针3、Groovy一瞥3.1、声明类3.2、使用脚本 (测试类)3.3、Groovy bean3.4、注解(annotations)3.5、使用@Grab3.6、处理文本3.7、Numbers是数字对象3.8、使用Lists, Maps, ranges3.9、闭包(代码即对象)3.10、Groovy 控制语句4、Groovy在java环境中的位置4.1、我的类是你的类4._图灵 groovy

Wireshark抓取数据包_wireshark如何抓取clink数据包-程序员宅基地

文章浏览阅读3.8k次,点赞5次,收藏16次。分析ICMP协议数据包实验原理 ping是用来测试网络连通性的命令,一旦发出ping命令,主机会发出连续的测试数据包到网络中,在通常的情况下,主机会收到回应数据包,ping采用的是ICMP协议。实验步骤 在过滤条件中分别输入“icmp” 点击开始抓包,为了抓取使用ICMP的包,我们要设置过滤条件,点击“选项”。 这是可以看到抓包过滤按钮后面..._wireshark如何抓取clink数据包

如何在word里面输出框框 里有勾√-程序员宅基地

文章浏览阅读659次。在Word文档中输入数字“2611”然后按下键盘上的快捷键 ALT + X此时,这几个数字就会转换成方框内打钩符号_√

动态修改vue页面title_vue 动态改变页面 title 取接口的动态值-程序员宅基地

文章浏览阅读682次。一,只需要在获取数据的时候,给其进行赋值就可以了// 获取数据getDetail(page, pageSize).then(resp => { if (resp.errCode == 0) { docment.title = resp.data.data.textTitle // 赋值页面数据 }else { this.$message.error(resp.msg) }})二,自己手动写// 在路由中routes: [ { name: 'home' path: _vue 动态改变页面 title 取接口的动态值

Software Engineering - The Soft Parts软件工程-软件部分_the main value in software is not the code produce-程序员宅基地

文章浏览阅读678次。Today I'll share some of the software engineering "soft skills" I've learned from my first 10 years on Google Chrome, where I am a Senior Staff Engineering Manager. On my 10th anniversary, I wanted to reflect on some of lessons that have stayed with me. I _the main value in software is not the code produced, but the knowledge accum

随便推点

Lingo数据_lingo的数据-程序员宅基地

文章浏览阅读1.2k次。3.1 模型的数据部分 3.1.1 数据部分入门 数据部分提供了模型相对静止部分和数据分离的可能性。显然,这对模型的维护和维数的缩放非常便利。 数据部分以关键字“data:”开始,以关键字“enddata”结束。在这里,可以指定集成员、集的属性。其语法如下:object_list = value_list; 对象列(object_list)包含要指定值的属性名、要设置集成员的集名,用_lingo的数据

Hive UDAF开发详解_hive udaf如何选择objectinspector-程序员宅基地

文章浏览阅读787次。说明这篇文章是来自Hadoop Hive UDAF Tutorial - Extending Hive with Aggregation Functions:的不严格翻译,因为翻译的文章示例写得比较通俗易懂,此外,我把自己对于Hive的UDAF理解穿插到文章里面。udfa是hive中用户自定义的聚集函数,hive内置UDAF函数包括有sum()与count(),UDAF实现有简单与通用两种方式,简..._hive udaf如何选择objectinspector

HTML5&CSS3基础:HTML的列表,超链接(2)_css,html阶段案例风云人物列表页面超链接-程序员宅基地

文章浏览阅读521次,点赞2次,收藏2次。该篇文章主要对HTML的列表和超链接进行知识小结,包含了几种列表和超链接的定义、组成、格式等。文章目录第一节:课程简介第三节:HTML的简介、标记、属性前言一、列表1. 无序列表1.1 标记组成1.2 标记属性1.3 语法格式及用法2. 有序列表2.1 标记组成2.2 标记属性2.3 语法格式及用法3.定义列表3.1 标记组成3.2 语法格式及用法4.列表嵌套二、超链接1. 超链接标记2. 文件路径3. 超链接其它用法第一节:课程简介点击访问第一节内容第三节:HTML的简介、标记、属性..._css,html阶段案例风云人物列表页面超链接

为何现在开源OA越来越热门?_open oa-程序员宅基地

文章浏览阅读194次。开源软件,有何缺点和优点?如上图所示:一种典型的回答是,优点就是可以自己改,缺点是安全性差。当然,从优点上来讲,选择开源OA或者开源软件有非常多的优点,可不仅仅是可以自己改和便宜,比如:1、能更详细地了解供应商或者选择的项目是否优质,代码一看就明白了;2、可以得到更好的技术支持,发布开源软件的开发者一般都会留下联系方式,遇到问题可以直接通过公开的方式进行联系,解决自己遇到的问题;3、因为有很多人都在使用,项目的迭代会持续进行,相当于大家都在为同一个项目不断提供经验,不断修复问题,项目_open oa

Vue.js 中v-on的事件修饰符【笔记】_js常用的修饰符-程序员宅基地

文章浏览阅读1.3k次。1、Vue.js中修饰符使用:在指令后缀通过点( . )来调用修饰符。<a v-on:click.stop="doThis"></a>举个例子:一个嵌套div,分别添加click事件。<div id="aa" @click="doaa"> <div id="bb" @click="dobb"></div></div>点击以后会相继执行dobb和doaa方法,此时我们可以通过加修饰符的方式来阻止冒泡事件。<div _js常用的修饰符

OpenOffice开发者指南笔记_com/sun/star/lib/uno/helper/unourl-程序员宅基地

文章浏览阅读1w次,点赞2次,收藏4次。一、1. Text Document modal 是document模型,其下有一个controller,controller不是用来改变document的,而是用来负责显示效果,比如自动换行,光标,放大缩小。 其包括5部分:text service manager_com/sun/star/lib/uno/helper/unourl