动画width:auto到width:auto? (或高度)

时间:2019-06-24 07:44:54

标签: javascript css

此问题不是重复的 How can I transition height: 0; to height: auto; using CSS? 因为在这里我要解决从auto到auto值的过渡,而不是从0到auto的过渡,这是更简单的情况,允许带介意的方法在那里工作。

我发现的技术(在SO和google上)没有提供如何从自动值转换为自动值的方法。

任何人都可以提供或链接到通用解决方案吗,我可以轻松地将其应用于任何元素..例如在其上放置一个类或一个事件侦听器..当将width设置为auto时,获得动画的宽度(或高度)变化。这两个(开始,结束)值都是未知的(取决于内容)?我不希望使用css解决方案,因为我在Google上搜索目前不可能,甚至似乎在可预见的将来也不是(https://github.com/w3c/csswg-drafts/issues/626)。因此,任何js micro lib或gist都很好。我还没有找到。

非常感谢!

PS:通俗地说,我的意思是我不必像最大宽度或变换比例方法那样提供任何确切的值。

technique1 max-width 不适合,因为它需要知道并设置估计的大小,并且还需要添加/删除/更改类,因此它如何应对内容突变(宽度变化)? +帖子中提到的其他次要缺点。

technique2 transform scale 不适合,因为它没有提供缩放到自动计算的值的方法。只是缩放到硬编码的百分比(缩放)大小。

technique3 js 提到的js代码没有提供如何获取元素的自动计算值的方法,因此,这可能是唯一的选择,但是需要通过获取起始端宽度来扩展它,并且还可能由MutationObserver

管理

0 个答案:

没有答案