帮我列出 animate.css 的各个类名
时间: 2023-11-27 12:54:27 浏览: 34
animate.css 是一个用于为网页元素添加动态效果的CSS库,其中包含多个类名。以下是 animate.css 中常用的类名:
- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- flip
- flipInX
- flipInY
- lightSpeedIn
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- slideInUp
- slideInDown
- slideInLeft
- slideInRight
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
这些类名可以通过将它们添加到 HTML 元素的类列表中来使用。例如:
```html
<div class="animated bounce">Hello, world!</div>
```
相关问题
vue2使用animate.css
在Vue2中使用animate.css,你可以按照以下步骤进行操作:
1. 在终端中使用npm命令安装animate.css库:
```
npm install animate.css --save
```
2. 在你的main.js文件中引入animate.css:
```javascript
import 'animate.css';
```
3. 在组件中使用animate.css的类来实现动画效果。例如,在一个按钮上添加bounce动画效果:
```html
<template>
<button class="animate__animated animate__bounce">Click me</button>
</template>
```
4. 如果你想在过渡效果中使用animate.css来实现动画,你可以使用Vue的过渡组件和animate.css的类。例如,在一个切换动画中使用zoomIn和zoomOut效果:
```html
<template>
<transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut">
<div v-if="isShow" class="box"></div>
</transition>
</template>
```
以上是在Vue2中使用animate.css的基本步骤。你可以根据你的具体需求来选择并应用animate.css中提供的各种类和动画效果。
vue3 animate.css
在Vue3中使用animate.css可以通过以下步骤实现:
1. 安装animate.css库:
```shell
npm install animate.css
```
2. 在需要使用动画的组件中引入animate.css:
```javascript
import 'animate.css';
```
3. 在组件的样式中定义动画类名:
```css
.router_animate-enter-active {
animation: rollIn 1s;
}
.router_animate-leave-active {
animation: rollOut 0.6s;
}
```
4. 在组件的模板中使用动画类名:
```html
<transition name="router_animate">
<!-- 组件内容 -->
</transition>
```
这样,当组件进入或离开时,会应用相应的动画效果。