vue tab 组件切换 滑动效果

UI小姐姐提的优化，其实内心是拒绝的

我们先找一下逻辑，如果要滑动效果，那我们的俩个或多个子组件就应该同时显示，并给子组件定位并排。

先给俩个组件定位,这里的select是之前控制组件是否显示的值
当然在tab标签点击的时候会改变select，这里就不做展示了。

我把后一个组件transform：translateX(100%);定位到了看不到的并排的地方，一会好操作。

首先定义一个俩个组件显示时候的状态
.huadong{
transform:translateX(0);
transition:all 1s ease-in-out;
}
当transform:translateX(0);值为0时，组件显示在屏幕，这里的transition:all 1s ease-in-out;过度效果，不加没有滑动效果

接着我们定义第一个组件的隐藏滑动样式
.YXSTListhuadong{
transform:translateX(-100%);
transition:all 1s ease-in-out;
}
当 transform:translateX(-100%); 值为-100%时 组件向左滑。

第二个组件滑动样式：
.KDSJListhuadong{
transform:translateX(100%);
transition:all 1s ease-in-out;
}
当 transform:translateX(100%); 值为100%时 组件向右滑。

这里我只是俩个组件的，多个组件的大家可以举一反三。