translate的百分比单位

马黑黑

使用 transform 移动对象自然要用到 translate，translate 接受实体距离单位（比如px），也接受百分比（%）。

百分比（%）可以简化编程开销。比如，需要在父元素上随机分布绝对定位的子元素，可以这样处理：

    子元素.style.left = Math.random() * (父元素.offsetWidth - 子元素.offsetWidth) + '%';

然鹅，设若我们使用 transform 的 translate(n%) 去移动一个对象时，我们会发现移动的距离非常之短，即便使用 100% 也会很短——实际上，使用 100% 时，对象移动的距离是该对象的宽度。

也就是说，transform 使用百分比（%）做 translate 的移动单位时，百分比所针对的是使用 transform 属性的元素自身而不是该元素所在的父元素。

这会给一些场景应用带来困难。比方说，我们要做一个全景粒子特效，使用 transform 的 translate 驱动粒子的运动，当页面在正常显示模式和全屏显示模式之间变换时，使用了 translate 的 @keyframes 关键帧动画就不能是一成不变的，它至少需要变换相应的变量，以确保粒子特效在两种或更多的显示模式之间变换时还是保持一致的运动状态。


解决方法很多，最容易想到的是监视父元素尺寸的变化，可以用一个定时器专门干这个事情。其他方法有各种 API 可用，专门监视DOM中元素变化的以及全屏状态的，都可以考虑。

马黑黑

醉美水芙蓉 发表于 2023-9-8 17:18
谢谢老师分享教程！

小辣椒

我平时就瞎捣鼓的，全屏欣赏的尺寸我一般都会用%,
其实许多知识点小辣椒都漏看了，可惜的

马黑黑

小辣椒 发表于 2023-9-8 18:54
我平时就瞎捣鼓的，全屏欣赏的尺寸我一般都会用%,
其实许多知识点小辣椒都漏看了，可惜的

漏看没关系，用到时查一查就好

红影

使用 transform 的 translate(n%) 去移动一个对象时，针对的是使用 transform 属性的元素自身而不是该元素所在的父元素。

用px做距离时，就不会出现这个问题吧？

红影

就算让粒子均布了，变化显示模式后，又会出问题。
这些要不是看到这个帖子，还真没注意过呢。
感谢黑黑的教学

马黑黑

红影 发表于 2023-9-8 20:01
就算让粒子均布了，变化显示模式后，又会出问题。
这些要不是看到这个帖子，还真没注意过呢。
感谢黑黑的 ...

这是心得体会

马黑黑

红影 发表于 2023-9-8 19:58
使用 transform 的 translate(n%) 去移动一个对象时，针对的是使用 transform 属性的元素自身而不是该元素 ...

px就是像素，他不看谁的脸色，就看显示器的像素（具体说是分辨率）

小辣椒

马黑黑 发表于 2023-9-8 19:39
漏看没关系，用到时查一查就好

我现在感觉查起来好费时间的，黑黑的教程真的是太多太全面了，花潮纯一个知识宝库

马黑黑

小辣椒 发表于 2023-9-8 20:35
我现在感觉查起来好费时间的，黑黑的教程真的是太多太全面了，花潮纯一个知识宝库

不一定查我提供的，网上一大把

红影

马黑黑 发表于 2023-9-8 20:31
这是心得体会

非常宝贵的经验呢

红影

马黑黑 发表于 2023-9-8 20:32
px就是像素，他不看谁的脸色，就看显示器的像素（具体说是分辨率）

嗯嗯，原来这两者的区别还挺大呢。

马黑黑

红影 发表于 2023-9-8 22:06
嗯嗯，原来这两者的区别还挺大呢。

这个主要是看针对 谁。百分比总得有个参照，left属性，参照父元素，translate 参照自身宽度和高度

马黑黑

红影 发表于 2023-9-8 22:06
非常宝贵的经验呢

过得去

红影

马黑黑 发表于 2023-9-8 23:01
这个主要是看针对 谁。百分比总得有个参照，left属性，参照父元素，translate 参照自身宽度和高度

是的，参照系不同，得到的结果也不相同。

红影

马黑黑 发表于 2023-9-8 23:01
过得去

黑黑辛苦了

马黑黑

红影 发表于 2023-9-9 08:01
黑黑辛苦了

还是手掌辛苦

马黑黑

红影 发表于 2023-9-9 08:01
是的，参照系不同，得到的结果也不相同。

是这个道理

红影

马黑黑 发表于 2023-9-9 08:58
还是手掌辛苦

每次看到手掌这个词，总觉得不准确，玩电脑，应该是手指更辛苦才是