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 中的过渡效果，那么运动过程中是反向的，和原效果的平移略有差别。

          回复

添加新评论