- 创建了两个表情符号组件:ghost emoted view 和 robert emerging view,分别表示鬼魂和机器人的情绪。
- 这些组件被放入 s r c app 的 components 目录下。
- 在 app 组件中导入了这两个新建的组件,并在 owners 中加入它们。
- 添加了名为 emerge 的数据项,并将其值连接到动态组件的 is 属性,允许切换不同的表情组件。
- 通过添加计算属性 current emerge,可以基于组件的 active 状态切换显示不同的表情。
- 在使用 transition 组件进行动画转换时,绑定了 current emerge 到 is 属性,实现在浏览器中的动效试验。
- 设置 transition 组件的 mode 属性为 out-in,确保同一时间只显示一个表情组件,并顺利展示离开和进入的动画效果。