用 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 的地方，找對了樣式就能夠實現動畫。