最近在用 element-ui 的时候,突然有个想法,想给 el-table 加上一点入场动画,就像下面这样。
引入文件
如果是 Vue 新建的工程文件,那么直接 npm install element-ui
,
或者可以通过 cdn 方式把 element-ui 引入。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
核心样式代码
这次使用的是 less
,其实只要是 css 的预处理器,随便选一款都可以做到,只要有循环。(当然,你直接写 css 也是可以的,不是很推荐。
.loop(@n) when (@n < 100) {
.el-table__body {
.el-table__row:nth-child(@{n}) {
opacity: 0;
animation: table-show 300ms @n * 50ms forwards ease-out;
}
}
.loop((@n + 1));
}
.loop(0);
@keyframes table-show {
0% { transform: translateY(50px); opacity: .5; }
100% { transform: translateY(0); opacity: 1; }
}
- 用 loop 从 0 开始,循环了 100 次,每次都会生成一条 css。
- 每一条 css 都是通过
nth-child
的形式去选择标签。 - 每条 css 都会有一个 animation。
- 每条 animation 都会有时间延迟。
- 每个 animation 都通过 forwards 让它停留在最后一帧
- 初始需要通过 opacity 设置成透明。
准备数据
这里我就简单的生成了下 id 和 name 的 20 条数据。
let nameMap = {
0: '零',
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六',
7: '七',
8: '八',
9: '九'
}
let replaceName = (name) => {
return name.replace(/\w/g, num => nameMap[num])
}
let getData = () => {
let list = []
for (let i = 1; i <= 20; i++) {
list.push({
id: Math.ceil(Math.random() * i * 100000),
name: replaceName('王' + i)
})
}
return list
}
页面数据
这个例子用了 pug,html 的一个模板。
#app
el-button(@click="refresh") 刷新列表
el-table(:data="data" row-key="id")
el-table-column(label="id" prop="id")
el-table-column(label="姓名" prop="name")
使用数据
之后只需要把数据绑定到 Vue 上就可以了。
new Vue({
data () {
return {
data: getData()
}
},
methods: {
refresh () {
this.data = getData()
}
}
}).$mount('#app')
总结
- 样式需要用 css 预处理去做一个循环,不然 css 容易错,还不容易维护。
- animation 如果想要动画保持在最后一帧的话,就需要使用 forwards。
- 本次只是用 element-ui 和 Vue 做了例子,其实只要是 table 就可以做到,把 .el-table__row 换成 tr 就可以了
- 所以这次的例子的使用场景可以是任何使用到 table 的地方,找对了样式就可以实现动画。