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