CodeSky 代码之空

鞋厂的 App 有这么一个效果，而我的小伙伴刚好要做这样一个效果，于是就开始研究到底是怎么做的，Emmmm，大家都知道我平时糊设计图的功底为 0，所以好好研究了一下。：

首先布局用 flex 可以实现，而动画可以用 transform 或者 animation 实现。

这个布局第一反应是 justify-content: space-between，写了一波之后果然可以实现这个效果，但是动画该怎么定位才是大难题。

这里我们第一反应是用了 vw 这个单位，1vw 的意思是视口宽度的 1%。最简单的动画效果是用 transition 来做，变化属性是 transform，那么东京二字就应该定位在 100vw - ${x}px - ${width} 的位置。假设两侧的留白是 10px，则我们可以得出上海和东京的位置，而不需要借助 space-between。

但事实是，如果用了 transform: translateX()，那么上海即使被位移了也会占据位置，如果我们用纯 CSS 实现，那么没有办法很好的定位东京二字。

所以我们回到 flex: space-between，那么东京默认为 -10px（向右留白 10px），上海为 10px（向左留白 10px），那么运动时东京定位在 -100vw + ${x}px + ${width}，而上海定位在 100vw - ${x}px - ${width}。

而至于不需要运动的中间按钮，只要留在中间就可以了。

具体的效果见：https://jsfiddle.net/csvwolf/4pgak94t/

• 参考资料：七个你可能不了解的CSS单位