鍓嶆鏃堕棿鎯宠鐨勶紝鍦ㄨВ鍐冲乏渚у鑸爮鐨勬縺娲婚棶棰樻椂锛屽彂鐜版姌鍙犲姩鐢荤殑transition涓嶆槸寰堟祦鐣咃紝杩樹即闅忕潃涓€浜沚ug銆傜敤璧锋潵涓嶆槸寰堥『鐣咃紝鎵€浠ュ湪瑙ｅ喅婵€娲籦ug鍚庯紝鍐冲畾鎶婂姩鐢绘晥鏋滀篃瑙ｅ喅銆傛垜浠厛鏉ョ湅涓€涓嬭瑙ｅ喅鐨勯棶棰橈紝濡備笅鍥撅細鏈夋病鏈変粩缁嗗彂鐜颁粈涔堥棶棰橈紵鐐瑰嚮灞曞紑menu-涓€鏍忔病鏈夐棶棰橈紝浣嗘槸鐐瑰嚮灞曞紑mene-浜屾爮銆傚綋鍔ㄧ敾瀹氭牸鍦╩enu-two-2閫夐」涓婃椂锛宮enu-two-3鍙婂悗闈㈤儴鍒嗙殑杩囨浮绔嬪嵆瀹屾垚銆?涓轰粈涔堬紵鍘熷洜瑙ｉ噴濡備笅銆備笂闈㈢殑瀹炵幇浠ｇ爜锛?!--html閮ㄥ垎-->.site-menu-sub{padding:0px;}銆俿ub-menu-enter-active,.sub-menu-leave-active{transition:all.3sease;楂樺害锛?0px锛?*杩欓噷70px鏄痬enu-one瀛愯彍鍗曠殑楂樺害*/}.sub-menu-enter,.sub-menu-leave-to{opacity:0;楂樺害锛?px锛泒杩欓噷鍥犱负鎴戣缃簡杩囨浮瀹屾垚鏃讹紙瀹屽叏灞曞紑鏃讹級鐨勯珮搴︿负70px锛屾墍浠ラ珮搴﹀畬鎴愪簡浠?鍒?0px鐨勮繃娓★紝浣嗘槸楂樹簬70px鐨勫厓绱犱細鏈夐棶棰橈紝楂樺害瓒呰繃70px鐨勯儴鍒嗕細绔嬪嵆瀹屾垚杩囨浮锛屾病鏈夊钩婊戣繃娓℃晥鏋溿€傛垜杩欓噷璁剧疆鐨?0px楂樺害姝ｅソ鏄痬uen-one灞曞紑鍚庣殑楂樺害锛岃繖灏辨槸涓轰粈涔坢enu-one灞曞紑鎶樺彔娌￠棶棰橈紝鑰宮enu-2鏈夐棶棰樼殑鍘熷洜銆傚悓鏍凤紝濡傛灉鎴戝皢楂樺害璁剧疆涓鸿彍鍗曚簩鐨勫睍寮€楂樺害锛?10px锛夛紝鑿滃崟涓€鐨勫睍寮€鍜屾姌鍙犲姩鐢讳篃浼氬嚭鐜伴棶棰樸€傝繖閲屽氨涓嶄妇渚嬩簡锛屽ぇ瀹跺彲浠ヨ嚜宸辫瘯璇曘€備笂闈㈢殑渚嬪瓙鍙互璇存槑锛氬綋鍙彉鍏冪礌鐨勯珮搴︽垨瀹藉害鐢辫繃娓″姩鐢绘帶鍒舵椂锛屽綋澶氫釜鎶樺彔鍏冪礌鐨勯珮搴︽垨瀹藉害涓嶅悓鏃讹紝楂樺害鎴栧搴︿笉鑳界洿鎺ュ啓鎴愬浐瀹氬€硷紙纭紪鐮侊級.褰撴姌鍙犲厓绱犵殑楂樺害鎴栧搴︿笉纭畾鏃讹紝楂樺害鎴栧搴︿笉鑳界洿鎺ュ啓鍏ュ浐瀹氬€硷紙纭紪鐮侊級銆傛姌琛锋柟妗堬細鎬濊矾锛氫娇鐢╩ax-height鎴杕ax-width鏉ユ帶鍒跺厓绱犵殑鏈€澶ч珮搴﹀拰瀹藉害銆備负浠€涔堝彨濡ュ崗锛屽洜涓烘湁缂洪櫡锛岃瑙佷笅鏂囷細鐪嬪埌闂浜嗗悧锛熻繃娓℃晥鏋滃ソ鍍忓緢蹇紝鍥犱负max-height璁剧疆涓?000px锛屼絾鏄瘮鍘熸潵鐨勬晥鏋滆濂姐€傚Ε鍗忔柟妗堜唬鐮侊細.site-menu-sub{padding:0px;}.sub-menu-enter-active,.sub-menu-leave-active{transition:all.3sease;鏈€澶ч珮搴︼細1000px锛?*杩欓噷鏈€澶ч珮搴﹁缃负鎶樺彔鍏冪礌涓嶈兘瓒呰繃鐨勯珮搴︼紝姣斿1000px*/}.sub-menu-enter,.sub-menu-leave-to{opacity:0;鏈€澶ч珮搴︼細0px锛泒html浠ｇ爜閮ㄥ垎娌℃湁鍙樺寲锛屽彧鏄皢height鏀逛负max-height锛屽皢max-height璁剧疆涓烘姌鍙犲厓绱犱笉鑳借秴杩囩殑楂樺害銆傚鏋渕ax-height璁剧疆鐨勫お灏忥紝浼氫綆浜庡睍寮€鍚庣殑鍏冪礌楂樺害銆傚睍寮€鍚庢牱寮忎細鍑虹幇闂锛屾樉绀轰笉瀹屾暣銆傝€屼笖杩欑鏂规骞舵病鏈夎揪鍒版渶瀹岀編鐨勬晥鏋滐紝浠ｇ爜缁存姢鎴愭湰涔熷緢楂樸€傚畬缇庤В鍐虫柟妗堬細鍏堟斁鍑烘晥鏋滃浘锛氭€濊矾锛氶€氳繃JavaScripthooks鑾峰彇闅愯棌灞傞珮搴︼紝鍔ㄦ€佹敼鍙橀殣钘忓眰楂樺害銆傚叿浣撳疄鐜版柟妗堝拰浠ｇ爜濡備笅锛氭柊寤轰竴涓猚ollapse-transition銆傛牱寮忕粍浠惰寮曠敤锛屼唬鐮佸涓嬶細//collapse-transition.jsconsttransitionStyle='0.3sheightease-in-out';constTransition={beforeEnter(el){el.style.transition=transitionStyle;濡傛灉(!el.dataset)el.dataset={};el.style.height=0;},enter(el){if(el.scrollHeight!==0){el.style.height=`${el.scrollHeight}px`;}else{el.style.height='';}el.style.overflow='闅愯棌';},afterEnter(el){el.style.transition='';el.style.height='';},beforeLeave(el){濡傛灉(!el.dataset)el.dataset={};el.style.height=`${el.scrollHeight}px`;el.style.overflow='闅愯棌';},leave(el){if(el.scrollHeight!==0){el.椋庢牸銆傝繃娓?杩囨浮椋庢牸锛涘焹灏斻€傞鏍笺€傞珮搴?0;}},afterLeave(el){el.椋庢牸銆傝繃娓?'';el.style.height='';},};exportdefault{name:'CollapseTransition',functional:true,render(h,{children}){constdata={on:Transition,};returnh('杞崲',鏁版嵁,瀛╁瓙浠?;},};鍦ㄩ渶瑕佺殑椤甸潰涓紩鍏ワ細use:c涔嬪墠ss琚垹闄わ紝涓嶅啀闇€瑕佸畠銆傝嚦姝わ紝鑷姩鑾峰彇鍏冪礌楂樺害鐨勯棶棰樺氨瑙ｅ喅浜嗐€傚彲浠ヨ鏄€滀竴鍔虫案閫糕€濄€傛棤璁洪殣钘忓眰楂樺害澶氶珮锛屽姩鐢婚兘娌℃湁闂銆傛墜椋庣惔妯″紡鐨勮繃娓￠棶棰樼湅浼煎緢缇庡ソ锛屼絾瀹為檯涓婃柊鐨勯棶棰樹竴鐩翠即闅忕潃鎴戜滑銆備笉鐭ラ亾浣犳湁娌℃湁鍙戠幇闂銆備笂闈㈢殑瀹炵幇娓叉煋鏈変竴涓浆鍦哄姩鐢荤殑bug锛屽氨鏄墜椋庣惔妯″紡锛堝彧缁存姢涓€涓瓙鑿滃崟锛夌殑杞満鏁堟灉鍑轰笉鏉ャ€傚湪鑿滃崟浜岀殑灞曞紑鐘舵€佷笅鐐瑰嚮鎶樺彔鐨勮彍鍗曚竴锛屾垜浠彂鐜拌彍鍗曚簩鏄洿鎺ュ叧闂殑锛屾病鏈夎繃娓″姩鐢汇€傝В鍐虫柟妗堬細//collapse-transition.jsbeforeLeave(el){if(!el.dataset)el.dataset={};el.style.display='鏂瑰潡';//娣诲姞杩欎竴琛宔l.style.height=`${el.scrollHeight}px`;el.style.overflow='闅愯棌';}锛屽皢display:'block'娣诲姞鍒癰eforeLeave閽╁瓙锛屽涓婃墍绀恒€傚疄鐜版晥鏋滃浘锛氬埌杩欓噷灏卞交搴曡В鍐充簡vue杞満鎶樺彔灞曞紑杞満鍔ㄧ敾鐨勯棶棰樸€傚叿浣撳弬鑰冭祫鏂欙細vuejs鏄浣曞疄鐜拌繖鏍风殑灞曞紑鍜屾姌鍙犲姩鐢荤殑锛烿ue瀹樻柟涓枃鏂囨。-Enter/Leave&ListTransition-JavaScriptHookelement-uicollapse-transitionAnimation婧愮爜鍏朵粬娉ㄦ剰浜嬮」褰曞埗gif鏃堕毦鍏嶄細鍑虹幇鎺夊抚鐜拌薄锛屾湰椤甸潰鎵€鏈夋晥鏋滃浘涓嶈兘浠ｈ〃瀹為檯鎵ц鏁堟灉.gif褰曞埗杞欢ScreenToGif銆俤emo&椤圭洰鍦板潃demo椤圭洰鍦板潃鑿滃崟缁勪欢浠ｇ爜杞満鍔ㄧ敾浠ｇ爜TheEnd馃榾
