这个视频我们试一下组件之间的过渡与动画。先去创建两个简单的表情符号组件，在 src/app 的下面，新建一个组件，放在 components 的下面，名字是 ghost-emoji.vue 。在组件里添加一组 template，里面的东西是组件的模板，一个 div 上面加上 emoji 这个类，然后包装一个 emoji。

再创建一个组件，放在 src/app/components 的下面，名字是 robot-emoji.vue ，一组 template，里面是一个 div，上面加上 emoji 这个类，包装的内容是一个机器人 emoji 。

然后回到 App 组件，在这个组件里导入刚才创建的那两个组件，一个是 GhostEmoji，来自当前目录 components 下面的 ghost-emoji.vue ，再导入 RobotEmoji ，位置是 components 下面的 robot-emoji.vue。

在组件里面再添加一个 components ，把导入的 GhostEmoji 还有 RobotEmoji 这两个组件放进来。 然后在组件里再添加一个数据，名字是 emoji，它的值可以是 GhostEmoji。

你可以把这个 emoji 的值交给动态组件的 is 属性。然后可以设置这个 emoji 的值切换使用不同的 emoji 组件。

或者也可以这样，在组件里添加一个 computed ，在里面定义一个叫 currentEmoji 的计算属性，返回的值可以根据这个组件里的 isActive 的值来决定，如果它的值是 true，就返回 GhostEmoji，如果是 false，就返回 RobotEmoji 。

因为现在点击组件上的这个按钮会设置 isActive 这个数据的值，所以可以切换使用不同的 Emoji 组件。

在组件的模板里找到 transition 组件，里面用一个 component ，在上面绑定一个 is 属性，它的值可以使用 currentEmoji 这个 computed 属性。

在浏览器上试一下，你会发现，现在显示的是个 Ghost ，点击按钮，会显示 Robot ，现在这两个组件在完成动画以前会同时出现。

如果你希望同一时间只显示一个组件，可以设置一下 transtion 组件的 mode 属性，它的值可以是 out-in ，就是先出再进，也可以是 in-out。这里我们要把这个模式属性的值设置成 out-in。

然后再到浏览器上试一下，现在，播放完离开动画以后，才会开始进入动画。这样在界面上同一时间就只会显示一个 Emoji 组件。