vue動畫效果出現重疊，並且出現滾動條

背景

使用 vue 結合 animated css 第三方動畫樣式，簡單地給頁面組件加上切換時的 fade 淡入/淡出動畫效果


當調試效果時發現，展示效果出現了問題，並且出現滾動條

原因

退場動畫還沒結束，進場動畫就進來了，導致動畫效果重疊，頁面展示效果出現問題

解決方法

在 transition 標簽上，添加 mode="out-in" 屬性，先執行完退場動畫在執行進場動畫，避免動畫重疊即可

總結

• 前端框架中遇見問題時，先查看標簽有沒有提供對應的屬性可以使用，沒有再嘗試其他方法
  
  

如果覺得對你有用，就請點個 推薦 吧！