CSS 过渡可以由 Vue Transition 组件 处理。过渡用于进入（出现）或离开（消失）动画。
但是，Quasar 可以提供大量现成的 CSS 动画。动画效果借鉴自 Animate.css。因此，有 80 多种动画类型可供您开箱即用。查看 Animate.css 网站或本页演示中的列表。
请参考 Vue 文档，了解如何使用 Vue 提供的
<transition>组件。
安装
编辑 /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 上开发，并且动画似乎不起作用，可能是操作系统级别的设置问题。尝试将 视觉效果 更改为 调整以获得最佳外观。
- 右键单击
我的电脑并选择属性 - 点击
高级系统设置 - 点击
性能下的设置按钮 - 在
视觉效果选项卡中，将单选按钮更改为：调整以获得最佳外观
使用
警告
注意实际动画类名前面的字符串 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"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-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，这使得进入动画在组件(s) 渲染后立即启动。此属性是可选的。