vue3 transition 動畫 css class name 改了!

把舊的 vue2 的 animation 的 class 名稱直接沿用到 vue3 專案,發現動畫怎跑不起來,原來是原本的 xxx-enter 改成 xxx-enter-from 了。

原本的動畫:

.fade-down-enter-active,
.fade-down-leave-active {
  transition: all 0.5s;
}
.fade-down-enter, .fade-down-leave-to {
  opacity: 0;
  transform: translateY(-50px);
}

使用 vue3 後要改成:

.fade-down-enter-active,
.fade-down-leave-active {
  transition: all 0.5s;
}
.fade-down-enter-from, .fade-down-leave-to {
  opacity: 0;
  transform: translateY(-50px);
}

在頁面中引用一樣是:

<transition appear name="fade-down">
  <div class="box"></div>
</transition>

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。