Vue3之列表动画和状态动画示例详解
概述
列表动画和状态动画都是增加用户体验的方法，当一个列表添加数据或者移除数据时，如果直接添加，突然显示，未免有些突兀，而且用户可能会不知道此时已经有数据加入了，从列表中移除数据也是，用户很有可能不知道当前已经移除了哪一条数据。但是如果加上动画就会好很多了，有趣的动画可以吸引用户的注意力，让用户关注新增和移除的数据。这就是列表动画，而状态动画是指从一个状态到另一个状态的变化，如果直接变过去，就会显得比较生硬，但是如果是加了动画慢慢过渡过去会好很多。
示例解析
列表动画
如上图所示我们要展示一个数字构成的列表,右面有一个按钮，点击按钮会执行一个动画增加数字。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表动画</title>
<style>
.list-item{
display: inline-block;
margin-right: 10px;
}
.v-enter-from{
opacity: 0;
transform: translateY(30px);
}
.v-enter-active{
transition: all 1s ease-in;
}
.v-enter-to{
opacity: 1;
transform: translateY(0px);
}
.v-move{
transition: 2.5s ease-in;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
list:[1,2,3]
}
},
methods: {
handleClick(){
this.list.unshift(this.list.length+1);
}
},
template:
`
<div>
<transition-group>
<span class="list-item" v-for = "item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClick">add</button>
</div>
`
});
const vm = app.mount('#root');
</script>
我们先是使用CSS将列表的动画效果定义出来，这个效果和之前讲的动画定义差不多，这里不过多赘述，定义好动画后，我们在Vue的template中使用一个span将我们的数字列表显示出来，然后最关键的是我们要使用 <transition-group>标签将我们要做动画的部分包裹起来。当我们点击按钮的时候，执行js函数往列表中新增一个列表长度加一的数。动画效果读者可以，运行查看。
状态动画
状态动画比较简单，就是从一个状态到另一个状态中间加一些过渡的值，主要是通过数据控制内容的展示，比如从1变到10，如果直接1马上变成10，则显得很生硬，但是中间加一写其他数字，比如2，3，4...最后再变成10就会好很多，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>状态动画</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 状态动画：通过数据控制内容的展示
const app = Vue.createApp({
data() {
return {
number:1,
animateNumber: 1
}
},
methods: {
handleClick(){
this.number =10;
if(this.animateNumber<this.number){
const animation = setInterval(()=>{
this.animateNumber += 1;
if(this.animateNumber === 10){
clearInterval(animation)
}
},100);
}
}
},
template:
`
<div>
<div>{{animateNumber}}</div>
<button @click="handleClick">do</button>
</div>
`
});
const vm = app.mount('#root');
</script>
列表动画比较简单，我们点击执行按钮的时候，使用js函数每隔100 毫秒就去修改一下当前显示的值，直到值变成最终想要状态的值就停止。
总结
列表动画和状态动画都是为了增强用户体验，列表动画主要是在列表中的数据变化的时候执行的，而状态动画主要是当一个状态更换到零一个状态的时候执行，列表动画通过vue提供的<transition-group>标签包裹需要执行动画的部分实现，而列表动画通过控制数据内容的展示实现，本文介绍的都是简单的动画效果，读者若需要实现更炫丽的动画效果，请关注脚本之家其它相关文章！
相关文章
vue使用smooth-signature实现移动端横竖屏电子签字
这篇文章主要为大家介绍了vue使用smooth-signature实现移动端横竖屏电子签字示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了Vue3配置代理后页面500/404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
在 Vue 框架中,哪些地方容易被攻击呢？写代码的时候要注意什么呢？这篇文章中小编为大家总结了一些常见的容易受到攻击的地方,希望对大家有所帮助2024-02-02
这篇文章主要介绍了vue项目打包之后接口出现错误的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了Vue导出excel的两个常用方式,分别为前端vue+XLSX导出excel和vue+后端POI 导出excel,感兴趣的小伙伴可以了解下2025-01-01
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。下面通过本文给大家分享Vue.js组件通信的几种姿势，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要介绍了详解elementUI中input框无法输入的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
在做vue3项目中时,每次使用都需要先进行引入,下面这篇文章主要给大家介绍了关于vue3 api自动导入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
vue.js中v-on:textInput无法执行事件问题的解决过程
大家都知道vue.js通过v-on完成事件处理与绑定，但最近使用v-on的时候遇到了一个问题，所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程，需要的朋友可以参考下。2017-07-07
这篇文章主要介绍了Vue中的变量赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论