《Vue.j实战》一书 p117 页练习 2 试做

练习2 ： 尝试在切换pane 的显示与隐藏时，使用滑动的动画。提示： 可以使用css 3 的transform:
translateX 。

Demo在线效果浏览

同练习1相比，对pane组件进行了改动，将组件 pane 变成了可利用的过渡组件：

1，在template中，用transition组件包裹住 div 元素，设置 name 和mode 特性。

2，在style中，添加 .pane等 class。其实 类 pane在书中已经有设置，只是未填写具体内容，算是作者给的一个提示线索吧。

<template>
<transition name="fade" mode="out-in">

    <div class="pane" v-show="show">
        <slot></slot>
    </div>

</transition>
</template>

<style>
.pane{
    display: inline-block;
}
 .fade-enter-active,.fade-leave-active{
     position: absolute;
     transition: all .8s ease;
}
.fade-enter, .fade-leave-to{
    transform: translateX(100px);
    opacity: 0;
}
</style>