用 animation 给 element-ui 添加动画吧

最近在用 element-ui 的时候，忽然有个想法，想给 el-table 加上一点入场动画，就像下面这样。

体验地址：codepen.io/viewweiwu/p…

引入文件

若是是 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; }
}
复制代码

1. 用 loop 从 0 开始，循环了 100 次，每次都会生成一条 css。
2. 每一条 css 都是经过 nth-child 的形式去选择标签。
3. 每条 css 都会有一个 animation。
4. 每条 animation 都会有时间延迟。
5. 每一个 animation 都经过 forwards 让它停留在最后一帧
6. 初始须要经过 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')
复制代码

总结

1. 样式须要用 css 预处理去作一个循环，否则 css 容易错，还不容易维护。
2. animation 若是想要动画保持在最后一帧的话，就须要使用 forwards。
3. 本次只是用 element-ui 和 Vue 作了例子，其实只要是 table 就能够作到，把 .el-table__row 换成 tr 就能够了
4. 因此此次的例子的使用场景能够是任何使用到 table 的地方，找对了样式就能够实现动画。