PartAnimator

PartAnimator 是一个 ‘极简’ 且 ‘灵活’ 的 CSS 过渡动画库,可快速复用于各种 前端 项目中。使用前只需要引入 CSS 文件。然后开始调用你想要的的类样式 ~ ,除了使用原生写法,还可以通过开发框架来调用。

当前动画数:41 (持续更新)

PartAnimator

快速上手

CSS 引入

1
<link rel="stylesheet" href="https://partanimator.glumi.cn/PartAnimator.css">

NPM 安装

1
npm install part-animator

HTML5 原生动画

PartAnimator 需要将父级元素设置为 flex 布局,然后给子元素指定相应的类样式即可使用。

1
2
3
4
5
6
7
8
9
10
11
<body>
<div class="part-enter-1">过度内容</div>
</body>

<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>

Vue.js 动画

与原生的道理一样,只需要在 Vue 中的 transition 属性中引入即可。同时,别忘了设置 flex 布局。

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
<template>
<div id="anim">
<button @click="show=!show">显示/隐藏</button>
<transition enter-active-class="part-enter-1" leave-active-class="part-leave-1">
<h1 v-if="show">过渡内容</h1>
</transition>
</div>
</template>

<script>
import css from 'part-animator/PartAnimator.css'
export default {
data() {
return {
show: false
}
}
}
</script>

<style scoped>
#anim {
display: flex;
justify-content: center;
align-items: center;
}
</style>

使用的过程中如果发生些问题,欢迎来给博主留言反馈,如果喜欢的话也可以来给个 Start 关注这个项目 : ) github.com/2670637999/PartAnimator