用 animation 给 element-ui 添加动画吧

4,891

最近在用 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 的地方,找对了样式就可以实现动画。