CSS 实现左右交换的效果

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

2017-12-05 at 20.42.gif

首先布局用 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/

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, 语法

已有 5 条评论

  1. 呱呱呱

    我有一个思路是利用rotateY完成
    包裹元素和东京、上海都加上rotateY(180deg)就完成了交换位置
    而且这个效果看起来还不错

    1. RowlingJoe

      rotateY(180deg)不行吧 ,那样虽然调转了但是字会反过来的

      1. 对 我刚开始也想到了这个=。=

      2. 呱呱呱

        字也转一下就行了,我说的是包裹元素和东京、上海两个字()都加上rotateY(180deg)

        1. 补充rotateY 的方法:https://jsfiddle.net/csvwolf/ddq7z9zj/,效果不太一样,在动画过程中会发现元素的旋转补间,如果没有 span 中的过渡效果,那么运动过程中是反向的,和原效果的平移略有差别。

添加新评论