微信小程序transform: translateY的理解

Posted 2023-04-15

参考技术A

用于2d平移的变换函数，其将y轴上的元素移动给定值。请注意，y轴垂直向下增加：正长度向下移动元素，而负长度向上移动元素。

translateY（<translation-value>）
横跨y轴平移的值。可以是 长度 或 百分比 值。

例子
该示例显示了三个div元素，这些元素使用translateY（）函数单独转换。

wxml

wxss

wx.js

分析： bottom-dialog-body 设置高度为300 left ， right ， bottom 都为0 开始赋值的 transform 属性为高度的100%（即：高度）用 anmation 改变 translateY 为0，设置成原来的 bottom
这个动画，都是相对于设置的 bottom 来的，但是位置是从第一次 translate 以后的位置，开始动画， 这边就第一次的 translate 和第二次的 translate 都是并列的，第一次 translate 相对于 bottom 那第二次的 translate 也是相对于 bottom

注意： 在 js 文件中， animation 调用 translateY(300) 这个单位是 px 不是 rpx 一定要特别注意

微信小程序-修改单选框和复选框大小的方法

方法有两种：

一：采用css的zoom属性

zoom缩放会将元素保持在左上角，并且会有毛边，可能会稍稍改变元素原来的形状。

 

二：采用css3的transform:scale属性

zoom缩放会将元素保持在中间，不会改变元素原来的形状，但是可能会有稍稍的模糊。

 

整体来说zoom属性与transform:scale属性主要存在如下几点差异

1、zoom的缩放是相对于左上角的；而scale默认是居中缩放；
2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
3、zoom和scale对元素的渲染计算方法可能有差异（需要自己动手，用高清图，仔细去看其中的区别）。
4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。

 

最后Anne在这里建议大家如果需要在小程序开发中修改单选框和复选框大小最好采用transform:scale属性，因为采用css的zoom属性时，形状被改变的有些明显，体验很不好。