PartAnimator 是一个 '极简' 且 '灵活' 的 CSS 过渡动画库,可快速复用于各种 前端 项目中。使用前只需要引入 CSS 文件。然后开始调用你想要的的类样式 ~ ,除了使用原生写法,还可以通过开发框架来调用。
当前动画数:41
(持续更新)
<link rel="stylesheet" href="https://partanimator.glumi.cn/PartAnimator.css">
npm install part-animator
PartAnimator 需要将父级元素设置为 flex 布局,然后给子元素指定相应的类样式即可使用。
<body>
<div class="part-enter-1">过度内容</div>
</body>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
与原生的道理一样,只需要在 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