动画 | Quasar 中文网

动画

CSS 过渡可以由 Vue 过渡组件处理。过渡效果用于进入（出现）或离开（消失）动画。

¥CSS Transitions can be handled by the Vue Transition Component. The transitions are used for entering (appearing) or leaving (disappearing) animations.

但是，Quasar 可以提供大量现成的 CSS 动画。动画效果借鉴自 Animate.css。因此，有 80 多种动画类型可供你开箱即用。查看 Animate.css 网站或此页面提供的演示中的列表。

¥However, Quasar can supply a big list of ready to use CSS animations. The animation effects are borrowed from Animate.css. So there are 80+ animation types available for you to use out of the box. Check the list either on Animate.css website or on the demo available for this page.

请参阅 Vue 文档，用于学习如何使用 Vue 提供的 <transition> 组件。
¥Please refer to Vue documentation for learning on how to use the Vue supplied <transition> component.

安装(Installation)

¥Installation

编辑 /quasar.config 文件：

¥Edit the /quasar.config file:

// embedding all animations
animations: 'all'

// or embedding only specific animations
animations: [
  'bounceInLeft',
  'bounceOutRight'
]

如果你正在构建网站，你也可以跳过配置 quasar.config 文件，并使用指向 Animate.css 的 CDN 链接，如下所示（以下仅为示例，最新链接请谷歌搜索）。请记住，这将需要你的用户连接到互联网，而不是从 quasar.config 文件中进行打包。

¥If you are building a website, you can also skip configuring the quasar.config file and use a CDN link which points to Animate.css like this (following is just an example, Google for latest link). Remember this will require an Internet connection for your user, as opposed to bundling from within the quasar.config file.

<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，则无需进行其他更改。

¥It should be noted that when you import Animate.css through the <link> tag, all animation CSS classes must be prefixed with animate__. This is a breaking change in the migration of Animate.css from v3 to v4. If you want to avoid using prefixes, you can import the compat version.

However, if you’re using the Quasar CLI, no additional changes are needed.

警告

Windows 开发者如果你在 Windows 上进行开发，并且动画似乎无法正常工作，则可能是操作系统级别的设置导致了问题。尝试更改视觉效果以调整为最佳外观。

¥Windows Developers If you’re developing on Windows and the animations don’t appear to be working, it’s likely an OS level setting that’s to blame. Try changing Visual Effects to Adjust for Best Appearance.

右键单击 My Computer 并选择 Properties
¥Right click My Computer and select Properties
点击 Advanced System Settings
¥Click Advanced System Settings
点击 Performance 下方的 Settings 按钮。
¥Click the Settings button under Performance
在 Visual Effects 选项卡下，将单选选项更改为：Adjust for Best Appearance
¥Under the Visual Effects tab, change the radio option to: Adjust for Best Appearance

用法(Usage)

¥Usage

警告

注意实际动画类名前面的字符串 animated。

¥Notice the string animated in front of the actual animation class name.

<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>

内置动画类(Built-in animation classes)

¥Built-in animation classes

Quasar 还提供了一些内置类，用于在进入和离开过渡之间为活动状态设置动画。提供的动画分为三组（点击展开）：

¥Quasar also provides some built-in classes to animate the active state between both enter and leave transitions. The animations provided are separated into three groups (click on them to expand):

通用类

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 官方文档获取有关这些类用法的更多信息。

¥You can also go to the official Vue documention for more information about the use of these classes.

修饰符类(Modifier classes)

¥Modifier classes

还有一些其他类可以延迟、重复或更改动画的速度（点击展开）：

¥There are additional classes which delay or repeat or change the speed of the animations (click to expand):

修饰符类

repeat
repeat-1
repeat-2
delay-1s
delay-5s
slower
slow
fast
faster

示例：

¥Example:

<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>

换行多个元素(Wrapping Multiple Elements)

¥Wrapping Multiple Elements

你还可以在过渡中对组件或 DOM 元素进行分组，以便同时对所有组件或 DOM 元素应用相同的效果。

¥You can also group components or DOM elements in a transition so that the same effects are applied to all of them simultaneously.

<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>

请注意以上示例中的以下几点：

¥Please note some things in the above example:

请注意，请使用 <transition-group> 而不是 <transition>。
¥Note <transition-group> instead of <transition>.
组件和 DOM 元素必须以键值形式显示，例如上例中的 key="text" 或 key="email-button"。
¥The components and DOM elements must be keyed, like key="text" or key="email-button" in the example above.
以上两个示例都指定了布尔属性 appear，这使得进入动画在组件渲染完成后立即生效。此属性是可选的。
¥Both examples above have the Boolean property appear specified, which makes the entering animation kick in right after component(s) have been rendered. This property is optional.

1. Introduction

2. 安装(Installation)

3. 用法(Usage)

3.1. 内置动画类(Built-in animation classes)

3.2. 修饰符类(Modifier classes)

3.3. 换行多个元素(Wrapping Multiple Elements)