【Vue.js 入门与实战】--动画-使用transition-group元素实现列表动画

简介: 一、 实现添加时候的动画效果二、 实行列表的融合

动画-使用transition-group元素实现列表动画

目录:

一、   实现添加时候的动画效果

二、   实行列表的融合

 

一、 实现添加时候的动画效果

之前已经学习了单个元素的动画,无论是小球,还是第三方动画库,还是自己定义的V-enter这些类名,都是控制单个元素。但如果是列表的话,需要通过以下方案来实现动画:

新建一个Vue列表,如何实现动画效果

新建一个窗口

<script>

//创建vue实例,得到ViewMode1

var vm = new Vue({

el:‘#app,

data: {

list: [

{id:1,name:‘赵高’}

{ id: 2,name:'秦桧’}

{ id: 3, name: '严嵩:}

{ id: 4, name:’魏忠贤’}

]

}

Methode:{ }

});

</ script>

 

<li v-for-"iten in list" :key-"item.id">

{{item.id}} --- {{item.name}}_

</li>

 

设置字体颜色 边距

<style>

li {

border:1px dashed #999;

margin:5px;

line-height:35px;

padding-left:5px;

font-size:12px;

}

 

li:hover{

background-color:pink;

transition: all 0.4s ease;

}

 

.v-enter,

.v-leave-to(

opacity: 0;

transform: translateY(80px);

}

 

.v-enter-active,

.v-leave-active,{

Transition:all 0.6s ease;

}

</style>

此时,执行,我们可以看到执行效果为:

image.png

 

二、实行列表的融合

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

<!—在实现列表过程的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用transition包裹,需要使用transitionGroup-->

<transition-group>

<li v-for-"iten in list" :key-"item.id">

{{item.id}} --- {{item.name}}_

</li>

</transition-group>

</ul>

<script>

//创建Vue实例,得到viewMode1

var vm = new Vue ((

e1: "#app' ,

data: {

id:‘ ’,

name‘‘,

list: [

{ id: 1, name:'赵高’}

{ id: 2,name:'秦桧’}

{ id: 3, name: '严嵩:}

{ id: 4, name:’魏忠贤’}

]

},

methods:{

add() {

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

this.id = this.name =’ ’

}

}

注意:如果要为v-for 循环创建的元素设置动画,必须要为每一个元素设置:key属性。

image.png

这就实现了添加时的动画效果。

相关文章
|
6天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
13 1
|
11天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
22 1
|
12天前
|
前端开发 JavaScript 安全
如何给页面元素添加水印背景,在vue中怎么处理?
如何给页面元素添加水印背景,在vue中怎么处理?
|
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
|
14天前
|
JavaScript 前端开发
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
【5月更文挑战第11天】JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式。map() 用于创建新数组,其中元素是原数组元素经过指定函数转换后的结果;filter() 则筛选出通过特定条件的元素生成新数组;reduce() 将数组元素累计为单一值。这三个方法使代码更简洁易读,例如:map() 可用于数组元素乘以 2,filter() 用于选取偶数,reduce() 计算数组元素之和。
17 2