嵌套的css缩放变换过渡不会相互抵消

前端之家收集整理的这篇文章主要介绍了嵌套的css缩放变换过渡不会相互抵消前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个图像,根据概述/详细状态更改其高度.它需要是背景图像的背景图像:覆盖以确保容器始终被覆盖.

由于转换需要具有高效性,除了在包装元素上使用transform:scaleY(0.5)和在内部元素上使用相应的变换转换:scaleY(2)之外,我没有别的办法,即取消缩放效果.

在开始和结束时,数学是正确的.但是,过渡看起来是错误的.
我准备了一个小小提琴来说明出了什么问题:

Codepen – Fiddle

正如您所看到的,即使是线性的,转换也不会完全相互抵消.我想有一个潜在的数学问题,但我似乎无法找到解决方案.

解决方法

编辑:继续为bezier曲线做一个示例codepen.

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

(另外,我确信数学堆栈交换人员会喜欢为你咀嚼这些东西.我几乎是肯定的,他们可以让你更清楚地了解曲线是如何工作的.)(呃,现在这很麻烦.我会清理它并稍后重新格式化)

猜你在找的CSS相关文章