布局，父容器设置位置：相对；儿童面具容器设置位置：绝对；并填充整个容器写一个动画类，让左边滑入类为enter_left，那么左边的动画可以写为：.enter_left{animation:enter-left0.3sease-in;}@keyframesenter-left{0%{变换：translate3d(-100%,0,0);}100%{转换：translate3d(0,0,0);}}一开始，mask是放在父容器外面的，刚好到达父容器100%的右边界，同理，各个方向的css动画也很容易写JS判断slider的方向我们就完成了上一步过半，写各个方向的动画，难点是如何判断鼠标进入容器的方向，我们可以画图分析，如下图：假设中心点的坐标矩形为x0(x0,y0)，鼠标进出矩形的边界坐标为x(x,y)。根据斜率公式，可以得到：l1斜率：k0=高/宽l2斜率：-k0l3斜率：k=(y-y0)/(x-x0)观察图形，我们可以看到l1和l2划分了将矩形分成4块，我们很容易得到：如果鼠标从右边进出，根据斜率：k>=-k0&&k<=k0，且x>x0；根据对称性，如果鼠标从左边进入out,then:k>=-k0&&k<=k0,andximgEventHandle(event,true)"@mouseleave="(event)=>imgEventHandle(event,false)">