diff --git a/src/components/ReCountTo/README.md b/src/components/ReCountTo/README.md
new file mode 100644
index 000000000..3656dbbeb
--- /dev/null
+++ b/src/components/ReCountTo/README.md
@@ -0,0 +1,2 @@
+normal 普通数字动画组件
+rebound 回弹式数字动画组件
diff --git a/src/components/ReCountTo/index.ts b/src/components/ReCountTo/index.ts
index d29729f86..bbd6266bd 100644
--- a/src/components/ReCountTo/index.ts
+++ b/src/components/ReCountTo/index.ts
@@ -1,10 +1,15 @@
import { App } from "vue";
-import reCountTo from "./src";
+import reNormalCountTo from "./src/normal";
+import reboundCountTo from "./src/rebound";
-export const ReCountTo = Object.assign(reCountTo, {
+export const ReNormalCountTo = Object.assign(reNormalCountTo, {
install(app: App) {
- app.component(reCountTo.name, reCountTo);
+ app.component(reNormalCountTo.name, reNormalCountTo);
}
});
-export default ReCountTo;
+export const ReboundCountTo = Object.assign(reboundCountTo, {
+ install(app: App) {
+ app.component(reboundCountTo.name, reboundCountTo);
+ }
+});
diff --git a/src/components/ReCountTo/src/index.tsx b/src/components/ReCountTo/src/normal/index.tsx
similarity index 99%
rename from src/components/ReCountTo/src/index.tsx
rename to src/components/ReCountTo/src/normal/index.tsx
index 838192b0f..62e8d1926 100644
--- a/src/components/ReCountTo/src/index.tsx
+++ b/src/components/ReCountTo/src/normal/index.tsx
@@ -10,7 +10,7 @@ import { countToProps } from "./props";
import { isNumber } from "/@/utils/is";
export default defineComponent({
- name: "CountTo",
+ name: "Normal",
props: countToProps,
emits: ["mounted", "callback"],
setup(props, { emit }) {
diff --git a/src/components/ReCountTo/src/props.ts b/src/components/ReCountTo/src/normal/props.ts
similarity index 100%
rename from src/components/ReCountTo/src/props.ts
rename to src/components/ReCountTo/src/normal/props.ts
diff --git a/src/components/ReCountTo/src/rebound/index.tsx b/src/components/ReCountTo/src/rebound/index.tsx
new file mode 100644
index 000000000..194df0a86
--- /dev/null
+++ b/src/components/ReCountTo/src/rebound/index.tsx
@@ -0,0 +1,73 @@
+import "./rebound.css";
+import {
+ defineComponent,
+ ref,
+ unref,
+ onBeforeMount,
+ onBeforeUnmount,
+ getCurrentInstance
+} from "vue";
+import { reboundProps } from "./props";
+
+export default defineComponent({
+ name: "Rebound",
+ props: reboundProps,
+ setup(props) {
+ const timer = ref(null);
+
+ onBeforeMount(() => {
+ const ua = navigator.userAgent.toLowerCase();
+ const testUA = regexp => regexp.test(ua);
+ const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
+
+ // Safari浏览器的兼容代码
+ isSafari &&
+ (timer.value = setTimeout(() => {
+ // @ts-ignore
+ getCurrentInstance().refs["ul"].setAttribute(
+ "style",
+ `
+ animation: none;
+ transform: translateY(calc(var(--i) * -9.09%))
+ `
+ );
+ }, props.delay * 1000));
+ });
+
+ onBeforeUnmount(() => {
+ clearTimeout(unref(timer));
+ });
+
+ return () => (
+ <>
+
+
+ );
+ }
+});
diff --git a/src/components/ReCountTo/src/rebound/props.ts b/src/components/ReCountTo/src/rebound/props.ts
new file mode 100644
index 000000000..08850418f
--- /dev/null
+++ b/src/components/ReCountTo/src/rebound/props.ts
@@ -0,0 +1,14 @@
+import { PropType } from "vue";
+import { propTypes } from "/@/utils/propTypes";
+export const reboundProps = {
+ delay: propTypes.number.def(1),
+ blur: propTypes.number.def(2),
+ i: {
+ type: Number as PropType,
+ required: false,
+ default: 0,
+ validator(value: number) {
+ return value < 10 && value >= 0 && Number.isInteger(value);
+ }
+ }
+};
diff --git a/src/components/ReCountTo/src/rebound/rebound.css b/src/components/ReCountTo/src/rebound/rebound.css
new file mode 100644
index 000000000..1b5a564c8
--- /dev/null
+++ b/src/components/ReCountTo/src/rebound/rebound.css
@@ -0,0 +1,66 @@
+.scroll-num {
+ width: var(--width, 20px);
+ height: var(--height, calc(var(--width, 20px) * 1.8));
+ color: var(--color, #333);
+ font-size: var(--height, calc(var(--width, 20px) * 1.1));
+ line-height: var(--height, calc(var(--width, 20px) * 1.8));
+ text-align: center;
+ overflow: hidden;
+ animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+
+ul {
+ animation: move 0.3s linear infinite,
+ bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+
+@keyframes move {
+ from {
+ transform: translateY(-90%);
+ filter: url(#blur);
+ }
+ to {
+ transform: translateY(1%);
+ filter: url(#blur);
+ }
+}
+
+@keyframes bounce-in-down {
+ from {
+ transform: translateY(calc(var(--i) * -9.09% - 7%));
+ filter: none;
+ }
+ 25% {
+ transform: translateY(calc(var(--i) * -9.09% + 3%));
+ }
+ 50% {
+ transform: translateY(calc(var(--i) * -9.09% - 1%));
+ }
+ 70% {
+ transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+ }
+ 85% {
+ transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+ }
+ to {
+ transform: translateY(calc(var(--i) * -9.09%));
+ }
+}
+
+@keyframes enhance-bounce-in-down {
+ 25% {
+ transform: translateY(8%);
+ }
+ 50% {
+ transform: translateY(-4%);
+ }
+ 70% {
+ transform: translateY(2%);
+ }
+ 85% {
+ transform: translateY(-1%);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
diff --git a/src/views/components/count-to/index.vue b/src/views/components/count-to/index.vue
index 9a59e62e7..b4374e96c 100644
--- a/src/views/components/count-to/index.vue
+++ b/src/views/components/count-to/index.vue
@@ -3,7 +3,7 @@
-
-
+
@@ -30,10 +31,11 @@