微信小程序transform: translateY的理解

用于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 一定要特别注意

td软件中transform旋转后有一道黑线因为在我们的软件中有这样一个小程序当它旋转后有一道黑线是因为我们在设置小程序的时候在里面我们对它的程序进行了一到设置所在所以它在运行的时候会出现这样的黑线也可能是显卡出现了一点问题

可以说 transfornm 有被动的使用方式，但更多的是主动使用方式。Transfornm 是一种编程框架，它提供了工具和函数，可以帮助编写者创建可转换的代码。它可以让编写者从定义变换到实现变换的过程轻松实现。它可以让程序员以更简单，更清晰的方式编写代码，提高代码的可读性和可维护性。此外，它还可以让编写者定义被动的变换，以便在需要时可以轻松执行被动的变换。

---