CSS如何让autoheight完美支持转场动画？

鍏抽敭鏍峰紡濡備笅銆傜綉鏍納鏄剧ず锛氱綉鏍硷紱grid-template-columns:repeat(3,1fr);}鍙互寰楀埌杩欐牱鐨勬晥鏋溿€傝繖閲岀殑repeat(3,1fr)鍏跺疄鏄?fr1fr1fr鐨勭缉鍐欙紝琛ㄧず3绛夊垎鍓╀綑绌洪棿銆備篃鍙互璁剧疆鍦ㄥ瀭鐩存柟鍚戙€俫rid{grid-template-rows:repeat(3,1fr);}鏁堟灉濡備笅锛屼篃鍙互鏀瑰彉鍚勮嚜鐨勫垎閰嶆瘮渚嬨€俫rid{grid-template-rows:1fr2fr1fr;}鏁堟灉濡備笅鐜板湪鐪嬩釜鐗逛緥锛屼篃鍙互璁剧疆鍒嗛厤姣斾緥涓?fr.grid{grid-template-rows:0fr2fr1fr;}鏄笉鏄湁鐐瑰鎬紝鏁堟灉濡備笅锛?fr鎬庝箞鍜?fr姣斾緥涓€鏍凤紵鍏跺疄杩欐槸鐢辩綉鏍肩殑鏈€灏忓昂瀵歌鍒欏喅瀹氱殑銆傛鏃舵渶灏忛珮搴︿负min-content锛岀敱鍐呴儴鏂囧瓧鍐冲畾銆傚鏋滄病鏈夋枃瀛楋紝0fr鑷劧涓嶄細鍗犵敤绌洪棿銆備笅闈㈡槸鍘绘帀鏂囧瓧鍚庣殑鏁堟灉銆傛兂淇濈暀鏂囧瓧涓嶅崰绌洪棿鎬庝箞鍔烇紵鍙互鐩存帴鎵嬪姩璁剧疆鏈€灏忓昂瀵竤pan{min-height:0}杩欐牱0fr灏变笉浼氬崰鐢ㄧ┖闂翠簡銆傛偍杩樺彲浠ヤ娇鐢ㄦ孩鍑烘潵瀹屽叏闅愯棌瀛愬唴瀹广€俫rid{overflow:hidden;}span{min-height:0}鏁堟灉搴旇鏄繖鏍锋瘮杈冨ソ鐞嗚В锛岄偅璺熷姩鐢绘湁浠€涔堝叧绯诲憿锛熺劧鍚庡線涓嬬湅2.鍙兘鏈夊悓瀛︿細鐤戞儜grid涓殑杩囨浮鍔ㄧ敾锛屼綍蹇呯籂缁撹繖涓?fr鍛紵鎻ず涓€涓嬶紝濡傛灉閲嶇疆1fr锛屽瓙鍐呭浼氶噸鏂板嚭鐜般€俫rid{grid-template-rows:1fr2fr1fr;}涓嬮潰鏄噸鐐癸紝grid涓殑fr鍗曞厓涔熸敮鎸佽繃娓″姩鐢伙紙0fr=>1fr).grid{缃戞牸妯℃澘琛?1fr2fr1fr;transition:.3s}鏁堟灉濡備笅鐢变簬鍐呴儴鏂囨湰寮€鍚簡楂樺害锛屽嵆楂樺害涓嶇‘瀹氾紝浠?fr鍒?fr鐨勮繃娓＄浉褰撲簬瀹炵幇浜嗕笉鍚岄珮搴﹀浐瀹氱殑杩囨浮鍔ㄧ敾鍙互杩涗竴姝ョ簿绠€涓鸿揪鍒拌繖鏍风殑鏁堟灉銆傝繖鏄珮搴︿笉鍥哄畾鐨勫姩鐢诲師鍨嬨€傛枃瀛楀啀澶氫竴鐐逛篃鑳藉畬缇庢敮鎾戝畬鏁寸殑demo銆傚彲浠ユ煡鐪嬩互涓嬩换鎰忛摼鎺SS鑷姩楂樺害杩囨浮锛坈odepen.io锛塁SS鑷姩楂樺害杩囨浮锛坮unjs.work锛?.鑷€傚簲楂樺害鍔ㄧ敾鐨勪袱涓緥瀛愪笅闈㈡牴鎹互涓婂師鐞嗗疄鐜颁袱涓緥瀛愩€傚厛鐪嬫枃绔犲紑澶寸殑渚嬪瓙锛孒TML缁撴瀯鏄繖鏍风殑鎶婇紶鏍囨斁鍦ㄤ笂闈㈣瘯璇?/button>

娆㈣繋鍏虫敞鍓嶇绁炴帰锛岃繖閲屾湁涓€浜涗綘鍙兘涓嶇煡閬撶殑鏈夎叮鐨凥TML銆丆SS銆丣S鎶€宸у拰绐嶉棬锛屾瘮濡傝繖绡囨枃绔狅紝濡備綍璁゛utoheight鏀寔transition鍔ㄧ敾鐗囷紵涓€璧锋潵鐪嬬湅