【Vue.js 入门与实战】--动画-实现列表删除和删除时候的动画效果

简介: 一、 列表删除和删除时候的动画效果

动画-实现列表删除和删除时候的动画效果

 

一、 列表删除和删除时候的动画效果

本节主要实现移除的动画,在列表中,只要点击每一项,就能移除他,时最为方便的。代码如下:

<transition-group>

<li v-fot=”(item,i) in list” :key=”item.id”@click=“del(i)>

{(item.id)}---{(item.name)}

</li>

</transition-group>

 

methods: {
add () {
this.list.push({ id: this.id, name: this . name } )

this.id = this . name =’ ‘
},
del (i) {
this.list. splice(i,1)

}

}

});

返回查看效果图可以看见已经慢慢消失了,但消失时线的颜色一直跟着它,可把它取消

<style>

li {

border: 1px dashed #999;

margin:5px;

line-height:35px

padding-left:5px;

font-size:12px;

width:100%;

加入一个属性

. v-move {(可实现元素在位移时的一些目的)
transition: all 0. 6s ease ;
}
. v-leave-active {
position: absolute

}

下面的 v-movev-leave-active配合使用,能够实现列表后续的元素,渐渐地漂上来的效果

相关文章
|
6天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
23 0
|
11天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
11天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
11天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
22 1
|
12天前
|
JavaScript 定位技术 API
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
|
12天前
|
JavaScript 数据可视化 UED
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
|
12天前
|
JavaScript 前端开发 数据可视化
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
|
12天前
|
资源调度 JavaScript 前端开发
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
|
12天前
|
存储 JavaScript 前端开发
用Vue写一个简单好看的菜单组件(Vue实战系列)
用Vue写一个简单好看的菜单组件(Vue实战系列)
|
13天前
|
存储 JavaScript 前端开发
Angular.js 如何绘制列表
Angular.js 如何绘制列表
18 2