我想创建一个滚动的数字动画在一个获胜的分数
但我不知道怎么做!
我想将目标数字从0增加到1,或从1增加到2等,只有当游戏赢了
约旦:
let firstTarget = 0;
日本证券交易所:
<div
style={{ backgroundColor: gameLost ? failureOp : gameWon ? successOp : 'lightgray' }}
ref={firstNodeRef}
className="inner-target-child"
>
<div id="counter" className="animated">
<ul className="digits luckie">
<li>{firstTarget}</li>
<li>{firstTarget + 1}</li>
<li>{firstTarget + 2}</li>
<li>{firstTarget + 3}</li>
</ul>
</div>
</div>
CSS:
#counter {
height: 1em;
overflow: hidden;
}
.digits {
float:center;
list-style-type: none;
font-size: 1em;
line-height: 1em;
margin-top: 0em;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 2.2s;
animation-fill-mode: forwards;
}
.luckie {
animation-name: luckie;
}
/* Animations */
@keyframes luckie {
100% {
margin-top: -3em;
}
}
1条答案
按热度按时间lsmepo6l1#
Z-Template是一个用于动态HTML渲染的客户端JavaScript库,其语法结合了动态变量、条件和循环。它是MIT许可的。使用此库,您可以包含MIT提供的zcall.roller.js来完成此工作。
如果您使用整个库,则只需
https://codepen.io/webdevelopers/full/vYabQNL
或者只是浏览一下代码库:https://github.com/webdevelopers-eu/z-template/tree/master/javascript/extra