i'm new to react, I want to make a countdown clock and flipping animation and problem is the display is not what i expected here is the react code:
useEffect(()=>{setTimeout(()=>{
setSecond(sec==0?59:sec-1);
if(sec==0){
setMinute(minute==0?59:minute-1);
if(minute==0){
setHour(hour==0?23:hour-1);
if(hour==0)
setDay(day-1);
}
checkAnimation(!animation)
}
},1000);
},[sec]);
<div className="time-countdown">
{
time.map((value,key)=>{
return(
<div value-before={value<=0?0:value-1} value-after={value} key={key} className={`count-down `}>
<div className={`face ${animation?"":"flip"}`}>
<div className="front-face">{value<=0?0:value-1}</div>
<div className="back-face">{value}</div>
</div>
</div>
);
})
}
`
and here is the css
.time-countdown{
display: flex;
flex-flow:row wrap;
justify-content: space-around;
width: 90%;
}
.count-down{
position: relative;
width: 65px;
height: 60px;
font-size: 45px;
box-shadow: 5px 5px 10px black;
border-radius: 10px;
margin: 0 5px;
z-index: 0;
}
.count-down::after,.count-down::before{
display: flex;
position: absolute;
overflow: hidden;
width:100%;
height:50%;
justify-content: center;
overflow: hidden;
}
.count-down::before{
content: attr(value-after);
bottom:0;
align-items: flex-end;
}
.count-down::after{
content:attr(value-before);
top : 0;
align-items: flex-start;
}
.face{
position: relative;
width: 100%;
height: 50%;
z-index: 1;
transform-origin: bottom;
transform-style: preserve-3d;
}
.flip{
animation-name:animation;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
animation-timing-function: ease-out;
}
.front-face,.back-face{
position: absolute;
display: flex;
position: absolute;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.front-face{
align-items:flex-end ;
transform: rotateX(-180deg) ;
}
.back-face{
align-items:flex-start ;
}
.front-face,.count-down::before,.count-down::after{
background-color: var(--darkblue);
}
It seems that the timming always ahead the flipping animation because there is a short delay between trasition,as the result, the transition executes every 2 second,i want it to execute same time,any ideas ?
