part-animator
v0.0.2
Published
一个 '极简' 且 '灵活' 的 CSS 过渡动画库
Downloads
1
Readme
PartAnimator
PartAnimator 是一个 '极简' 且 '灵活' 的 CSS 过渡动画库，可快速复用于各种 前端 项目中。使用前只需要引入 CSS 文件。然后开始调用你想要的的类样式 ~ ，除了使用原生写法，还可以通过开发框架来调用。
当前动画数：41 （持续更新）
快速上手
CSS 引入
<link rel="stylesheet" href="https://partanimator.glumi.cn/PartAnimator.css">NPM 安装
npm install part-animatorHTML5 原生动画
PartAnimator 需要将父级元素设置为 flex 布局，然后给子元素指定相应的类样式即可使用。
<body>
<div class="part-enter-1">过度内容</div>
</body>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>Vue.js 动画
与原生的道理一样，只需要在 Vue 中的 transition 属性中引入即可。同时，别忘了设置 flex 布局。
<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 关注这个项目 : ) https://github.com/2670637999/PartAnimator
blog: https://blog.glumi.cn/47.html