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%时 组件向右滑。
这里我只是俩个组件的,多个组件的大家可以举一反三。