这个效果是怎么实现的？

Question

https://h5.m.taobao.com/app/m...
这个页面切换正在热映和即将上映时下面的红条是怎么实现的
这个span元素好像并不是通过位移 这个动效是如何实现的

Answer 1

通过js把节点入DOM后，再通过两次修改它的 transform 属性，加上 transition 属性，动画就出来了。

Answer 2

首先截个图：

从图中能看到，红色的span，是用了transition和transform来实现的动画效果。
意思就是：transition会监听transform的变化，且transform的变化是在0.7s的时候内用动画的形式进行变化。

至于 transform: translateX(0px) 这个值是怎么变化的？
是根据用户点击切换“正在热映”和“即将上映”的时候，用js计算出，当前操作的地方，translateX的值，然后用js动态的修改红色span的translateX的值，修改之后，红色span就会按动画形式进行滚动了。