reactjs 滚动数字动画

1cosmwyk  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(182)

我想创建一个滚动的数字动画在一个获胜的分数
但我不知道怎么做!
我想将目标数字从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;
   }
}
lsmepo6l

lsmepo6l1#

Z-Template是一个用于动态HTML渲染的客户端JavaScript库,其语法结合了动态变量、条件和循环。它是MIT许可的。使用此库,您可以包含MIT提供的zcall.roller.js来完成此工作。
如果您使用整个库,则只需

<script type="text/javascript">zTemplate(document.querySelector('h1'), {"counter": 582});</script>
<h1 z-var="counter call roller">000</h1>

https://codepen.io/webdevelopers/full/vYabQNL
或者只是浏览一下代码库:https://github.com/webdevelopers-eu/z-template/tree/master/javascript/extra

相关问题