Comments (7)
sLeeNguyen
commented on May 20, 2024
2
Screen.Recording.2023-04-04.at.14.23.32.mov
You can see in this video the difference. As the project description "A 3D animated countdown component for React", I want to make it 3D animated. In your case, seem like you just want to display the normal clock (without animation)
from react-flip-clock-countdown.
sLeeNguyen
commented on May 20, 2024
I use it to get 3D transition each time the clock flip
from react-flip-clock-countdown.
natterstefan
commented on May 20, 2024
To me it looks like it also works without it, is there a huge difference when not using it?
from react-flip-clock-countdown.
sLeeNguyen
commented on May 20, 2024
Of course, you can disable it if, in the new version, we allow more customization to each UI element
from react-flip-clock-countdown.
natterstefan
commented on May 20, 2024
in the new version, we allow more customization to each UI element
That'd be awesome and might solve some issues we have and also the ones related to #10, yes. Do you see any chance of implementing this feature request in the near future?
from react-flip-clock-countdown.
sLeeNguyen
commented on May 20, 2024
I'm quite busy at the moment and I don't know when this feature will be released. If you can, don't hesitate to create a PR.
from react-flip-clock-countdown.
natterstefan
commented on May 20, 2024
Hey @sLeeNguyen,
from what I've seen so far in our environment the problem was gone once I added overflow: hidden to the same class using perspective. I am not sure how to proof it as I cannot share more insights from our project publicly.
Here is our patch (using patch-package):
diff --git a/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css b/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css
index 4575067..0b6c14b 100644
--- a/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css
+++ b/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css
@@ -1 +1 @@
-._qWTcH{--fcc-flip-duration:0.7s;--fcc-digit-block-width:46px;--fcc-digit-block-height:80px;--fcc-digit-font-size:50px;--fcc-label-font-size:16px;--fcc-label-color:#fff;--fcc-background:#0f181a;--fcc-digit-color:#fff;--fcc-divider-color:hsla(0,0%,100%,0.4);--fcc-divider-height:1px;--fcc-shadow:0 0 2px 1px rgba(0,0,0,0.1);--fcc-separator-size:5px;--fcc-separator-color:var(--fcc-digit-color);font-family:inherit;font-size:var(--fcc-digit-font-size);color:var(--fcc-digit-color);line-height:0;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;display:flex;align-items:center}._1tbqx ._3cpN7{margin-bottom:calc(var(--fcc-label-font-size)*2)}._3cpN7 ._2EBbg:not(:last-child){margin-right:4px}._3cpN7{position:relative;display:flex;align-items:center}._2aOn7{color:var(--fcc-label-color);line-height:1;font-weight:400;font-size:var(--fcc-label-font-size);position:absolute;bottom:0;left:50%;transform:translate(-50%,150%)}._2EBbg{perspective:200px;position:relative;width:var(--fcc-digit-block-width);height:var(--fcc-digit-block-height);box-shadow:var(--fcc-shadow);border-radius:4px}._106d2,._SKh-V{position:absolute;width:100%;height:50%;overflow:hidden;display:flex;justify-content:center;background:var(--fcc-background)}._SKh-V{align-items:flex-end;top:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._106d2{align-items:flex-start;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px}._3luxx{position:relative;z-index:2;width:100%;height:50%;transform-style:preserve-3d;transform-origin:bottom;transform:rotateX(0)}._3luxx._2kgZC{transition:transform var(--fcc-flip-duration) ease-in-out;transform:rotateX(-180deg)}._2v-d4{position:absolute;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--fcc-background)}._1GZQ7{align-items:flex-end;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._3AVXa{align-items:flex-start;transform:rotateX(-180deg);border-bottom-left-radius:4px;border-bottom-right-radius:4px}._2hRXr{margin-left:8px;margin-right:8px;height:var(--fcc-digit-block-height);display:flex;flex-direction:column;justify-content:center;align-items:center}._1tbqx ._2hRXr{margin-bottom:calc(var(--fcc-label-font-size)*2)}._2hRXr:after,._2hRXr:before{content:"";width:var(--fcc-separator-size);height:var(--fcc-separator-size);border-radius:50%;background-color:var(--fcc-separator-color)}._2hRXr:before{margin-bottom:var(--fcc-separator-size)}
\ No newline at end of file
+._qWTcH{--fcc-flip-duration:0.7s;--fcc-digit-block-width:46px;--fcc-digit-block-height:80px;--fcc-digit-font-size:50px;--fcc-label-font-size:16px;--fcc-label-color:#fff;--fcc-background:#0f181a;--fcc-digit-color:#fff;--fcc-divider-color:hsla(0,0%,100%,0.4);--fcc-divider-height:1px;--fcc-shadow:0 0 2px 1px rgba(0,0,0,0.1);--fcc-separator-size:5px;--fcc-separator-color:var(--fcc-digit-color);font-family:inherit;font-size:var(--fcc-digit-font-size);color:var(--fcc-digit-color);line-height:0;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;display:flex;align-items:center}._1tbqx ._3cpN7{margin-bottom:calc(var(--fcc-label-font-size)*2)}._3cpN7 ._2EBbg:not(:last-child){margin-right:0px}._3cpN7{position:relative;display:flex;align-items:center}._2aOn7{color:var(--fcc-label-color);line-height:1;font-weight:400;font-size:var(--fcc-label-font-size);position:absolute;bottom:0;left:50%;transform:translate(-50%,150%)}._2EBbg{perspective:200px;overflow:hidden;position:relative;width:var(--fcc-digit-block-width);height:var(--fcc-digit-block-height);box-shadow:var(--fcc-shadow);border-radius:4px}._106d2,._SKh-V{position:absolute;width:100%;height:50%;overflow:hidden;display:flex;justify-content:center;background:var(--fcc-background)}._SKh-V{align-items:flex-end;top:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._106d2{align-items:flex-start;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px}._3luxx{position:relative;z-index:2;width:100%;height:50%;transform-style:preserve-3d;transform-origin:bottom;transform:rotateX(0)}._3luxx._2kgZC{transition:transform var(--fcc-flip-duration) ease-in-out;transform:rotateX(-180deg)}._2v-d4{position:absolute;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--fcc-background)}._1GZQ7{align-items:flex-end;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._3AVXa{align-items:flex-start;transform:rotateX(-180deg);border-bottom-left-radius:4px;border-bottom-right-radius:4px}._2hRXr{margin-left:4px;margin-right:4px;height:var(--fcc-digit-block-height);display:flex;flex-direction:column;justify-content:center;align-items:center}._1tbqx ._2hRXr{margin-bottom:calc(var(--fcc-label-font-size)*2)}._2hRXr:after,._2hRXr:before{content:"";width:var(--fcc-separator-size);height:var(--fcc-separator-size);border-radius:50%;background-color:var(--fcc-separator-color)}._2hRXr:before{margin-bottom:var(--fcc-separator-size)}
\ No newline at end of filefrom react-flip-clock-countdown.
Related Issues (9)
- feat: allow modifying margin of the UI elements HOT 4
- Bug: Safari has issues when rendering multiple FlipClockCountdowns HOT 5
- defaultProps warning using React 18 HOT 1
- `digitBlockStyle` is not working HOT 1
- hide day HOT 4
- className in typescript HOT 5
- Default value for clock HOT 5
- Allows countdown for a period of time HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-flip-clock-countdown.