vue集成animate.css_vue animate.css

一 <transition> 标签的用法

1. 使用<transition></transition>标签包裹要加动画的元素。

2. 标签中添加属性name，表示执行动画的名字，不加默认为v

3. 如果没使用属性name，设置动画需要用：
   
   进入：.v-enter 进入的起点、.v-enter-to 进入的终点、.v-enter-active 进入的过程（Vue2）
   离开：.v-leave 离开的起点、.v-leave-to 离开的终点、.v-leave-active 离开的过程（Vue2）

4. 如果有name属性，设置动画用：
   
   进入：.name值-v-enter 进入的起点、.name值-enter-to 进入的终点、.name值-enter-active 进入的过程（Vue2）
   离开：.name值-leave 离开的起点、.name值-leave-to 离开的终点、.name值-leave-active 离开的过程（Vue2）

5. 标签中添加属性appear，值为布尔值true/false，表示是否在初始化时就执行动画

// 没有加name属性

<template>
    <div>
        <button @click="bol = !bol">隐藏/显示</button>
        <!-- Vue 的内置动画标签 transition -->
        <transition>
          
            <h1 v-show="bol">组件动画效果</h1>
           
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { bol: true };
    },
};
</script>

<style>
/* 进入动画 */
.v-enter-active {
    animation: move 1s;
}

/* 离开动画 */
.v-leave-active {
    animation: move 1s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translate(0);
    }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// 加上name属性，并且加上appear属性

<template>
    <div>
        <button @click="bol = !bol">隐藏/显示</button>
        
        <!-- 动画会在一开始便生效 -->
        <transition name="moveCartoon" appear>
            
            <h1 v-show="bol">组件动画效果</h1>
            
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { bol: true };
    },
};
</script>

<style>
/* 类名要对应回 name 的属性值 */
.moveCartoon-enter-active {
    animation: move 1s;
}
.moveCartoon-leave-active {
    animation: move 1s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translate(0);
    }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

二 关于animate.css

介绍animate.css 常用的几种分类

1. Attention seekers：用于引人注目的动画，比如刚进一个网站，要凸显的某个地方，可以用这个动画。
2. Bouncing entrances 与 Bouncing exits 弹跳入场与弹跳出场的动画。
3. Fading entrances 与 Fading exits 淡入浅出的动画
4. Rotating entrances 与 Rotating exits 旋转入场与旋转出场的动画
5. Zooming entrances 与 Zooming exits 缩放入场与缩放出场的动画
6. Sliding entrances 与 Sliding exits 侧边划入与侧边划出的动画

三 vue集成animate.css

1. npm i animate.css
2. 在main.js 中 引入 import ‘animate.css’;

使用

1. <transition name="animate__animated animate__bounce"> 固定配置上name="animate__animated animate__bounce"
2. 通过enter-active-class和leave-active-class实现不同样式配置，这两个的属性的值就是animate.css官网中样式的名称。
   

例如：

<transition 
	name="animate__animated animate__bounce" 
	enter-active-class="animate__swing" 
	leave-active-class="animate__fadeOutTopLeft"
>
...
</transition>


1
2
3
4
5
6
7
8
9