animate.css_Animate.css的过渡组件

animate.css

Vue动画 (vue-animated)

transition component for Animate.css.

Animate.css的过渡组件。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

Download the project using your favorite package manager:

使用您最喜欢的包管理器下载项目：

npm install @codekraft-studio/vue-animated
yarn add @codekraft-studio/vue-animated

Then load it in your project:

然后将其加载到您的项目中：

import VueAnimated from '@codekraft-studio/vue-animated'

Vue.use(VueAnimated)

Than use it in your application as you would with transitions:

就像在转换中那样在应用程序中使用它：

<AnimatedTransition>
  <div v-if="show" class="box"></div>
</AnimatedTransition>

Or customize it as you want, it will adapt the css animation to your settings

或根据需要对其进行自定义，它将使CSS动画适应您的设置

<AnimatedTransition enter="slideInDown" leave="slideInDown" duration="5000">
  <!-- Normal transition content -->
</AnimatedTransition>

---

---

项目设置 (Project setup)

npm install

编译和热重装以进行开发 (Compiles and hot-reloads for development)

npm run serve

编译并最小化生产 (Compiles and minifies for production)

npm run build

运行测试 (Run your tests)

npm run test

整理和修复文件 (Lints and fixes files)

npm run lint

运行单元测试 (Run your unit tests)

npm run test:unit

翻译自: https://vuejsexamples.com/transition-component-for-animate-css/

animate.css