logo

该视频仅会员有权观看

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

¥
199
/ 年
  • 创建了两个表情符号组件: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,确保同一时间只显示一个表情组件,并顺利展示离开和进入的动画效果。