动画 | Quasar Framework 中文网

动画

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

但是，Quasar可以提供大量即用型CSS动画。动画效果来自Animate.css。因此，目前有80+动画类型可供您开箱即用。查看Animate.css网站上的列表或此页面的展示的DEMO。

请参阅Vue文档，了解如何使用Vue提供的<transition> 组件。

安装

编辑 /quasar.config.js.

// embedding all animations
animations: 'all'

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

如果您正在构建一个网站，您也可以跳过配置quasar.config.js并使用指向Animate.css的CDN链接（以下仅为示例，Google为最新链接）。请记住，这需要为您的用户提供Internet连接，而不是从quasar.config.js中进行捆绑。

<!-- src/index.template.html -->
<head>
  ...

  <!-- CDN example for Animate.css -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
  >
</head>

WARNING

应该注意的是，当通过<link>标签导入Animate.css时，所有动画CSS类都必须带有animate__前缀。这是Animate.css从v3到v4迁移的重大变化。如果要避免使用前缀，则可以导入compat版本。但是，如果您使用的是Quasar CLI，则无需进行其他更改。

::: info Windows开发人员 如果你是在Windows上开发的，而动画似乎不起作用，那么很可能是操作系统级别的设置造成的。尝试将视觉效果更改为调整以获得最佳外观。 1.右键单击“我的电脑”并选择“属性” 2.单击“高级系统设置” 3.单击“性能”下的“设置”按钮 4.在“视觉效果”选项卡下，将单选选项更改为：“调整以获得最佳外观” :::

用法

注意实际动画名称前面的字符串“animated”。

<!-- Example with wrapping only one DOM element / component -->
<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>

包装多个元素

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

<!-- Example with wrapping multiple DOM elements / components -->
<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，这使得在渲染组件后立即进入动画。此属性是可选的。