i have a problem when making Flip Clock animation
the animation will perform like this reference
reference : http://hilios.github.io/jQuery.countdown/
so far, this is my work.
demo : https://jsfiddle.net/s3qk25m7/1
i try this one :
HTML :
<div class="time">
<span class="count top flipTop">2</span>
<span class="count top">1</span>
<span class="count bottom flipBottom">1</span>
<span class="count bottom">2</span>
</div>
CSS :
.time {position: relative; height: 95px; width: 65px;
perspective: 200px; backface-visibility: hidden;
transform: translateZ(0); transform: translate3d(0,0,0);
}
.count {background: #202020; color: #f8f8f8; display: block;
font-size: 2em; line-height: 2.4em; overflow: hidden;
position: absolute; text-align: center;
top: 0; width: 100%;
}
.top {height: 50%; line-height:95px; transform-origin: 50% 100%; }
.bottom {line-height: 0; height: 50%; top: 50%; transform-origin: 50% 0; }
@keyframes flipTop {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
@keyframes flipBottom {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
.flipTop {
animation-name: flipTop;
animation-duration: 0.25s;
animation-fill-mode: both;
}
.flipBottom {
animation-name: flipBottom;
animation-duration: 0.25s;
animation-delay: 0.25s;
animation-fill-mode: both;
}
the animation not working properly. how to solve this issue?
what's wrong with my code?
thanks in advance...
The issue is that the animated div is behind the static.
To fix this add z-index: 1
to your .flipPosition
class.
Check out this updated fiddle
Edit: note that the lower div's number seems to be updated too early
Edit 2: I just realized that ngAnimateSwap would probably be perfect for this!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.