nir*_*zul 7 css css3 css-transforms
我有一个图像,根据概述/详细状态更改其高度.它必须是背景图像,background-size: cover以确保容器始终被覆盖.
由于转换需要具有高效性,我认为除了在内部元素transform: scaleY(0.5)上使用包装元素和相应的转换之外别无其他方法transform: scaleY(2),即取消缩放效果.
在开始和结束时,数学是正确的.但是,过渡看起来是错误的.我准备了一个小小提琴来说明出了什么问题:
正如您所看到的,即使是线性的,转换也不会完全相互抵消.我想有一个潜在的数学问题,但我似乎无法找到解决方案.
小智 4
编辑：继续为贝塞尔曲线制作一个示例代码笔。
http://codepen.io/anon/pen/jAYOBO <-- （旧）
您面临的问题是这些操作的相对性。您必须为游戏中的转换提供不同的值。关于变换，您拥有正确的数学逻辑，但是，修改这些特性的过渡不会被调整为保持具有各自不同值的相同动画 - 过渡值是相同的。
这意味着，即使正在转换的两个对象之间具有完美的 2:1 比例，它们在过程中不同步骤的变化率本质上是不同的 - 无论它们的目的地/最终结果如何。如果您希望它们的外观相同，则需要调整过渡设置。
仍然困惑吗？换句话说....
假设您有 2 个 div 框，位于不同的容器中，且互不影响。下面是一些 CSS 来表达它们的相关属性：
div.a{
width:100px;
height:100px;
}
div.b{
width:200px;
height:200px;
}
我们可以对它们进行完全相同的转换：线性、10 秒，并将它们各自的大小加倍scale()。（div.a高度/宽度为 200px，div.b高度/宽度为 400px）
现在，虽然它可能看起来与您的情况无关，并且显然这两个不会以相同的速度“增长” - （不同的起点，不同的目的地[不能同等地消除初始起点差异]，具有相同的持续时间） - 这与您遇到的问题相同。
要纠正问题并使动画按照您期望的方式运行，您必须修改过渡的计时函数。
为了证明我所描述的现象确实正在发生，我已经将其中一个转换元素的转换类型更改为可以在下面的 codepen 链接上缓和并分叉它的转换类型。玩一下它，你就会明白我在说什么。如果您需要更多信息，请评论我的答案！
http://codepen.io/anon/pen/qNVgBB
有用的链接： http: //cubic-bezier.com/
进一步阅读：二次贝塞尔曲线：计算点
（另外，我确信数学堆栈交换人员会很乐意为您咀嚼这些东西。我几乎肯定他们可以为您提供更清晰的曲线工作原理细分。）（呃，这很混乱，因为哎呀，我会清理它并稍后重新格式化）