CSS过渡

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

然而，Quasar可以提供一个准备使用CSS动画的大名单。 动画效果是从Animate.css借来的。 所以目前有12个通用、32个进入和32个离开动画类型可供您使用(开箱即用)。 可在Animate.css网站上或此页面的演示上查看此动画列表。

请参考Vue Documentation Website了解如何使用Vue提供的<transition>组件。

安装

编辑 /quasar.conf.js.

// 嵌入所有动画
animations: 'all'

// 或只嵌入特定的动画
animations: [
  'bounceInLeft',
  'bounceOutRight'
]

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

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

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

基本用法

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

<!-- 仅包装一个DOM元素/组件的示例 -->
<transition
  appear
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"
>
  <!-- 仅包装一个由QBtn定义的DOM元素 -->
  <q-btn
    color="secondary"
    icon="mail"
    label="Email"
  />
</transition>

包装多个元素

您也可以将组件或DOM元素分组到一个过渡中，以便同时对它们应用相同的效果。

<!-- 包装多个DOM元素/组件的示例 -->
<transition-group
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"
>
  <!-- 我们包装一个“p”标签和一个QBtn -->
  <p key="text">
     Lorum Ipsum
  </p>
  <q-btn
    key="email-button"
    color="secondary"
    icon="mail"
    label="Email"
  />
</transition-group>

在上面的例子中请注意一些事情:

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

滚动实用程序 幻灯片过渡