显示还有隐藏通知提示信息的时候可以使用一种过渡效果。回到项目，打开 app-notification 这个组件，这里可以使用 Vue 提供的 transition-group 这个组件，用它包装一下这个 AppNotificationMessage 。

然后在这个 transition-group 组件的上面，用 name 设置一个过渡的名字，比如 app-notification-message，下面可以在样式表里设计一下过渡样式。

样式

打开 app-notification-message 这个样式表，在这里添加一些过渡跟动画的样式，类的名字是 .app-notification-message 后面加上 enter-active，进入时的状态，用 transform 这个属性，它的值是 translateX 让元素往右移动 330 像素。

下面再用 transition 设置一下过渡，时长是 0.3s 。

然后再设计一下 app-notification-message-enter-to 这个类的样式，进入结束时的状态，这里用 transform 属性，把它的值设置成 translateX ，移动的距离是 0。

下面再设计一下元素离开时的过渡，设计一下 app-notification-message-leave-active 这个类的样式，用 transition 把过渡时长设置成 0.3s。

最后是 app-notification-message-leave-to，元素离开结束时的状态，transform，值是 translateX ，把元素往右移动 330 像素。

预览

回到浏览器测试一下，点一下这个按钮，现在显示通知提示信息的时候就会使用一种过渡效果，组件离开的时候也会使用一种过渡效果。