https://h5.m.taobao.com/app/m...
这个页面切换正在热映和即将上映时下面的红条是怎么实现的
这个span元素好像并不是通过位移 这个动效是如何实现的
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
2
502
收藏
通过js把节点入DOM后，再通过两次修改它的
transform属性，加上transition属性，动画就出来了。首先截个图：
从图中能看到，红色的span，是用了transition和transform来实现的动画效果。
意思就是：transition会监听transform的变化，且transform的变化是在0.7s的时候内用动画的形式进行变化。
至于 transform: translateX(0px) 这个值是怎么变化的？
是根据用户点击切换“正在热映”和“即将上映”的时候，用js计算出，当前操作的地方，translateX的值，然后用js动态的修改红色span的translateX的值，修改之后，红色span就会按动画形式进行滚动了。