鞋厂的 App 有这么一个效果,而我的小伙伴刚好要做这样一个效果,于是就开始研究到底是怎么做的,Emmmm,大家都知道我平时糊设计图的功底为 0,所以好好研究了一下。:
首先布局用
可以实现,而动画可以用
- flex
或者
- transform
实现。
- animation
这个布局第一反应是
,写了一波之后果然可以实现这个效果,但是动画该怎么定位才是大难题。
- justify-content: space-between
这里我们第一反应是用了
这个单位,
- vw
的意思是视口宽度的 1%。最简单的动画效果是用
- 1vw
来做,变化属性是
- transition
,那么东京二字就应该定位在
- transform
的位置。假设两侧的留白是 10px,则我们可以得出上海和东京的位置,而不需要借助
- 100vw - ${x}px - ${width}
。
- space-between
但事实是,如果用了
,那么上海即使被位移了也会占据位置,如果我们用纯 CSS 实现,那么没有办法很好的定位东京二字。
- transform: translateX()
所以我们回到
,那么东京默认为 -10px(向右留白 10px),上海为 10px(向左留白 10px),那么运动时东京定位在
- flex: space-between
,而上海定位在
- -100vw + ${x}px + ${width}
。
- 100vw - ${x}px - ${width}
而至于不需要运动的中间按钮,只要留在中间就可以了。
具体的效果见:jsfiddle.net/csvwolf/4pg…
来源: https://juejin.im/entry/5a2699396fb9a044fc449996