transition过渡动画能否把未知的初始尺寸变为0？

Question

容器高度为height，里面包含文字及图片，所以height是自适应的高度，我现在想用动画变成0px.

transition: height 1s ease-in-out 300ms;

但是不行，只有知道原始高度才行，比如100px transition 0px.

Answer 1

如果单纯从css 无法解决的话，为什么不考虑一下js， 用js 计算出这个未知元素的高度， 然后操作这个元素的transform;就能解决你的问题啊

Answer 2

没有初始值确实不能生效，会直接一闪而过。过渡，从一种状态到另外一种状态，没有设置的话只有结束状态，当然无法生效。不过你可以试试用jquery的animate替代，这是可以有效果的。据我观察，jquery会先计算出此元素的大小再做动作，也就是说如果你能自己获得元素高度那以上效果都能实现，终上所述，楼上正解~~

Answer 3

使用max-height可以正常进行N transition 0,但设定的最大值最好控制在自适应高度预期值左右，否则小->大的动画没关系，但大->小的动画会感觉很慢。