logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年

列表的过渡与动画

  • 使用 Vue 的 transition group 组件实现列表过渡效果。
  • 在应用中添加一个名为 emogene list 的数组,包含 emerge 表情符号。
  • v-for 指令循环渲染列表数据,需要绑定一个唯一的 key
  • 使用 lodash library 安装后,在组件里创建 shuffle 方法打乱数组顺序。
  • 在列表元素添加 click 事件,调用 shuffle 方法重新排序列表并触发过渡效果。
  • 过渡效果由设置在类 emerge 上的 CSS transition 属性实现。
  • Alternatively, 添加 pop 方法并绑定 click 事件以删除列表中的最后一项。
  • 定义新的 name 属性和 leave-active-class 来自定义过渡效果或使用第三方动画库 animate.css 实现更复杂的动画效果。