frontcsseffectplugin
v0.0.16
Published
用于无侵入动态添加进入可视区的动画样式。提供三种轮子的使用方法。
Downloads
2
Readme
1.frontCssEffectPlugin
提供三种轮子的使用方法。用于无侵入动态添加进入可视区的动画样式。
1.1 省心模式-动画模式
<script src="https://cdn.jsdelivr.net/npm/frontcsseffectplugin@latest/dist/cssEffect.min.js"></script>
let temp = cssEffect.default
使用者调用两个函数就可以了(通过animation实现)
new temp().commonEnterUp({
element:document.querySelector(".page3"),
distance_viewable_num:10,
distance_css_num:500,
key:"向上1的标识符号"
})
具体参数示例看 test/case1.html,下面是图片示例
1.2 自定义配置模式-动画模式
通过使用者自定义进入和离开两个函数就可以了(通过animation实现)
let temp = cssEffect.default
new temp().userEnterLeft({
element:document.querySelector(".page3"),
distance_viewable_num:10,
distance_css_num:500,
key:"向上1的标识符号",
distance_unshow_num:20
})
new temp({
time:1,
delay:0
}).userLeaveRight({
element:document.querySelector(".page3"),
distance_viewable_num:10,
distance_css_num:500,
key:"向上11的标识符号"
})
具体参数具体示例看 test/case2.html,下面是示例
1.3 省心模式-帧模式
只支持从上到下的显示(不通过animation方法,纯js控制)
let temp = cssEffect.default
new temp().frameRight({
element:document.querySelector(".page4"),
distance_viewable_num:10,
distance_css_num:500,
key:"向上11的标识符号"
})
new temp().frameLeft({
element:document.querySelector(".page3"),
distance_viewable_num:10,
distance_css_num:450
})
具体示例看 test/case3.html
1.4 npm 安装
npm install frontcsseffectplugin
import cssEffect from "frontcsseffectplugin/dist/cssEffect.min.js"
//不知道为什么 import {cssEffect } 有一点问题
new cssEffect().commonEnterRight({
element:this.$refs.ceshi,
distance_viewable_num:10,
distance_css_num:500,
key:"向上1的标识符号"
})
特别说明的一点是在你的项目中最好不要用translateX/Y来布局 ,不然可能有乱七八糟的报错。当然用它做动效跟我插件并没有冲突
overflow: scroll;
overflow-x: hidden; 根节点谨慎用
ver0.0.14 优化省事模式下面首次进入的显示
ver0.0.13 优化传参格式
ver0.0.9 修复多层级的offsettop不穿透的问题
ver0.0.6 添加ts支持