由于转换需要具有高效性,除了在包装元素上使用transform：scaleY(0.5)和在内部元素上使用相应的变换转换：scaleY(2)之外,我没有别的办法,即取消缩放效果.
在开始和结束时,数学是正确的.但是,过渡看起来是错误的.
我准备了一个小小提琴来说明出了什么问题：
正如您所看到的,即使是线性的,转换也不会完全相互抵消.我想有一个潜在的数学问题,但我似乎无法找到解决方案.
解决方法
http://codepen.io/anon/pen/jAYOBO< - (旧) 现在使用曲线转换回正常元素状态： http://codepen.io/anon/pen/oLpLLG< - (新) 您面临的问题是这些操作的相对性.你必须为游戏中的过渡提供不同的值.您有关于变换的数学逻辑,但是,您修改这些特征的过渡不会被调整为保持相同的动画,它们各自具有不同的值 – 过渡值是相同的. 这意味着即使您在转换的两个对象之间有完美的2：1比例,它们的变化率在过程的不同步骤中也是固有的 – 无论其目的地/最终结果如何.如果要使它们在外观上均衡,则需要调整转换设置. 仍然困惑？换一种说法…. 假设您在不相互影响的单独容器中有2个div框.这里有一些CSS来传达它们的相关属性：
div.a{
width:100px;
height:100px;
}
div.b{
width:200px;
height:200px;
}
我们可以对这些完全相同的过渡：线性,10s,并用scale()将它们各自的大小加倍. (div.a的高度/宽度为200px,div.b的高度/宽度为400px)
现在,虽然它似乎与你的情况无关,但很明显这两个不会以同样的速度’增长’ – (不同的开始,不同的目的地[不同样否定初始的起始差异],持续时间相同) – 这是你遇到的同一个问题.
要纠正问题并使动画以您期望的方式运行,您必须修改转换的计时功能.
为了证明我所描述的现象确实在发生,我已经将一个转换元素的转换类型更改为在下面的codepen链接上缓解和分叉的转换类型.玩它,你会得到我在说什么.如果您需要更多信息,请评论我的答案！
http://codepen.io/anon/pen/qNVgBB
有用的链接：http://cubic-bezier.com/
进一步阅读：Quadratic Bezier Curve: Calculate Point
(另外,我确信数学堆栈交换人员会喜欢为你咀嚼这些东西.我几乎是肯定的,他们可以让你更清楚地了解曲线是如何工作的.)(呃,现在这很麻烦.我会清理它并稍后重新格式化)