CSS 過渡效果可以使用 Vue Transition Component 處理。過渡效果用於進入（出現）或離開（消失）動畫。
然而，Quasar 提供了大量的現成 CSS 動畫。動畫效果借鑒自 Animate.css。因此，您可以直接使用 80 多種動畫類型。請查看 Animate.css 網站或此頁面提供的示範列表。
請參考 Vue 文件，以了解如何使用 Vue 提供的
<transition>元件。
Installation
編輯 /quasar.config 檔案
// embedding all animations
animations: 'all'
// or embedding only specific animations
animations: [
'bounceInLeft',
'bounceOutRight'
]如果您正在建置網站，您也可以略過設定 quasar.config 檔案，並使用指向 Animate.css 的 CDN 連結，就像這樣（以下僅為範例，請 Google 搜尋最新的連結）。請記住，與從 quasar.config 檔案中捆綁不同，這會需要您的使用者具備網路連線。
<!-- @quasar/app-vite: /index.html -->
<!-- @quasar/app-webpack: src/index.template.html -->
<head>
...
<!-- CDN example for Animate.css -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
>
</head>警告
應注意，當您透過 <link> 標籤匯入 Animate.css 時，所有動畫 CSS 類別都必須加上 animate__ 前綴。這是 Animate.css 從 v3 遷移到 v4 的重大變更。如果您想避免使用前綴，您可以匯入 相容版本。
但是，如果您使用的是 Quasar CLI，則無需進行額外變更。
警告
Windows 開發人員 如果您在 Windows 上進行開發，且動畫似乎無法運作，則可能是作業系統層級設定的問題。請嘗試將視覺效果變更為調整成最佳外觀。
- 右鍵點擊
My Computer並選取Properties - 點擊
Advanced System Settings - 點擊
Performance下方的Settings按鈕 - 在
視覺效果標籤下，將單選按鈕選項變更為：調整成最佳外觀
用法
警告
請注意實際動畫類別名稱前面的字串 animated。
<transition
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<!-- Wrapping only one DOM element, defined by QBtn -->
<q-btn
color="secondary"
icon="mail"
label="Email"
/>
</transition>內建動畫類別
Quasar 也提供一些內建類別，用於在進入和離開轉換之間為活動狀態製作動畫。提供的動畫分為三組（點擊它們以展開）
通用類別
bounce
flash
flip
headShake
heartBeat
hinge
jello
pulse
rubberBand
shake
shakeX
shakeY
swing
tada
wobble「進入」類別
backInDown
backInLeft
backInRight
backInUp
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInBottomLeft
fadeInBottomRight
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInTopLeft
fadeInTopRight
fadeInUp
fadeInUpBig
flipInX
flipInY
jackInTheBox
lightSpeedInLeft
lightSpeedInRight
rollIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
slideInDown
slideInLeft
slideInRight
slideInUp
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp「離開」類別
backOutDown
backOutLeft
backOutRight
backOutUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutBottomLeft
fadeOutBottomRight
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutTopLeft
fadeOutTopRight
fadeOutUp
fadeOutUpBig
flipOutX
flipOutY
lightSpeedOutLeft
lightSpeedOutRight
rollOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp您也可以前往 官方 Vue 文件，以取得有關使用這些類別的更多資訊。
修飾符類別
還有其他類別可以延遲或重複或變更動畫速度（點擊以展開）
修飾符類別
repeat
repeat-1
repeat-2
delay-1s
delay-5s
slower
slow
fast
faster範例
<transition
appear
enter-active-class="animated fadeIn slower delay-5s repeat-2"
leave-active-class="animated fadeOut"
>
<!-- Wrapping only one DOM element, defined by QBtn -->
<q-btn
color="secondary"
icon="mail"
label="Email"
/>
</transition>包裝多個元素
您也可以在轉換中將元件或 DOM 元素分組，以便將相同的效果同時應用於所有元素。
<transition-group
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<!-- We wrap a "p" tag and a QBtn -->
<p key="text">
Lorem Ipsum
</p>
<q-btn
key="email-button"
color="secondary"
icon="mail"
label="Email"
/>
</transition-group>請注意以上範例中的一些事項
- 請注意
<transition-group>而不是<transition>。 - 元件和 DOM 元素必須鍵控，例如以上範例中的
key="text"或key="email-button"。 - 以上兩個範例都指定了布林屬性
appear，這會使進入動畫在元件已呈現後立即啟動。此屬性是選用的。