动画-使用transition-group元素实现列表动画|学习笔记-阿里云开发者社区

动画-使用transition-group元素实现列表动画|学习笔记

2022-10-25 129

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 快速学习动画-使用transition-group元素实现列表动画

开发者学堂课程【Vue.js 入门与实战：动画-使用transition-group元素实现列表动画】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/586/detail/8170

动画-使用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>

此时，执行，我们可以看到执行效果为：

二、实行列表的融合

<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属性。

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