在vue中 往往會(huì)有側(cè)邊欄點(diǎn)擊顯示和隱藏的動(dòng)畫(huà)效果薄翅，總結(jié)了一種實(shí)現(xiàn)方式疲酌。
參考布局
截圖
? ? ? ? 代碼中的布局方式
? 當(dāng)點(diǎn)擊按鈕是 class 進(jìn)行切換皇忿，sidbar-wrapper ?向左移動(dòng)負(fù)值（比如側(cè)邊欄寬度200px,移動(dòng)-160px,剩下的40px是要顯示圖標(biāo)的寬度）锄蹂，并設(shè)置 overflow hidden氓仲，這個(gè)時(shí)候移動(dòng)子div sidebar-container ?想右移動(dòng)比如 155px ，剛好將圖標(biāo)顯示到合理位置得糜。main-wrapper ?margin-left 上面的40px 敬扛。
基本思路就是這樣。主要使用css3? transform: translate(-160px,0); ? ? transition: all.28sease-out; 這兩個(gè)特性
但凡界面元素發(fā)生變化都可以添加 ?transition
