javascript - 如何制作一个合理的收缩滑出效果？

问题描述

问 题

现在想要实现的效果是：在点击 left 后， left 向右充满整个屏幕， right 向右滑出屏幕。为了实现这个效果，我做了以下尝试：
思路一：变化后 left 的宽度变成 100%，同时 right 的宽度变成 0；
缺点： right 宽度变成 0，其内容仍然存在。并且如果 right 中有浮动元素，在向右滑动的过程中，页面的布局也会发生变化。
思路二：变化后 left 的宽度变成 100%，同时 right （通过 position 或者 translateX 属性）向右平移；
缺点： right 向右平移后，需要给 container 添加 overflow-x: hidden 属性隐藏，由于 left 和 right 高度不同，最终造成 right 区域垂直方向部分被遮盖。
思路三：变化后 left 的宽度变成 100%，同时 right 通过 scaleX 属性做水平缩放；
缺点： 缩放的过程，left 和 right 区域缩放的速度不同造成视觉上看起来并不顺滑；
思路四：left 和 right 都通过 scaleX 属性进行水平缩放；
缺点：虽然解决了视觉上不顺滑的问题，但是 scaleX 造成 left 文字变宽。

这里是代码部分：
https://jsfiddle.net/bLyLfahf/1/

解决方案

我后来想到了思路五，动画效果通过 margin 实现，左侧定义一个左浮动，右侧根据左侧的宽度定义一个 margin-left 值，然后通过改变 margin-left 值来实现右侧的横向移动。
缺点是：右侧内部的清除浮动也会影响到左侧内容。

这篇关于javascript - 如何制作一个合理的收缩滑出效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！