可以通过 Vue Transition Component 来处理 CSS 过渡效果，为组件/DOM 加上出现或消失时的动画。
Quasar 提供了一组可以直接使用的 CSS 动画，这些动画效果来自 Animate.css，共有 80 多种动画开箱即用。您可以前往 Animate.css 官网查看在线演示，也可以查看本页面提供的示例。
请前往 Vue 文档学习更多关于如何使用
<transition>组件的知识。
安装
编辑 /quasar.config 文件：
// 开启全部的动画
animations: "all";
// 或者只开启部分动画
animations: ["bounceInLeft", "bounceOutRight"];如果您只是在构建网站，也可以跳过 quasar.config 文件的配置，转而通过 CDN 引入 Animate.css（以下仅为示例，请自行搜索最新链接）。请注意，这种方式需要用户有网络连接，而通过 quasar.config 文件配置则会将样式打包到项目中。
<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>WARNING
注意，若您通过 <link> 标签引入 Animate.css，所有的 animation CSS 类都需要添加 animate__ 前缀。这是 Animate.css 从 v3 迁移到 v4 的破坏性更新。如果您想避免使用前缀，可以选择导入兼容版本。
但如果您使用的是 Quasar CLI，则无需额外处理。
WARNING
Windows 开发者注意 如果您在 Windows 上开发，动画看起来不生效，很可能是操作系统级别的设置导致的。 请尝试将视觉效果调整为最佳外观：
- 右键点击
此电脑，选择属性 - 点击
高级系统设置 - 在
性能下点击设置按钮 - 在
视觉效果选项卡中，选择：调整为最佳外观
用法
WARNING
注意动画类名前面都需要加上 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 还提供了一些内置的 CSS 类，用于控制进入和离开过渡的激活状态动画。这些动画分为三组（点击展开）：
通用类
bounce
flash
flip
headShake
heartBeat
hinge
jello
pulse
rubberBand
shake
shakeX
shakeY
swing
tada
wobble"In"（进入）类
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"Out"（离开）类
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 中，让它们同时应用相同的动画效果。
<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 属性，例如
key="text"或key="email-button"。 - 上面两个示例中都使用了布尔属性
appear，它会让进入动画在组件渲染后立即执行一次。此属性是可选的。