动画

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

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

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

安装

编辑 /quasar.conf.js.

// embedding all animations
animations: 'all'

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

如果您正在构建一个网站,您也可以跳过配置quasar.conf.js并使用指向Animate.css的CDN链接(以下仅为示例,Google为最新链接)。 请记住,这需要为您的用户提供Internet连接,而不是从quasar.conf.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,则无需进行其他更改。

用法

注意实际动画名称前面的字符串“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>

请注意以上示例中的一些内容:

  1. 注意使用<transition-group>而不是<transition>
  2. 必须键入组件和DOM元素,例如上面示例中的key="text"key="email-button"
  3. 上面的两个例子都指定了布尔属性appear,这使得在渲染组件后立即进入动画。 此属性是可选的。