动画组件

上一节中的代码只实现了组件之间的切换，并没有实现动画效果，接下来可以给组件切换添加动画，代码如下。

视图层代码如下。

<transition mode="out-in">
    <component :is="comName"></component>
</transition>

CSS 样式代码如下。

<style>
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 1s ease;
    }
</style>

代码解析如下。

如果想对元素添加动画效果，只需要使用 transition 标签包裹，然后添加两组样式类即可。mode 是动画模式，组件切换时，让原先的组件先隐藏，新组件再显示，从而提升了交互效果。