React / Tailwind：如何保持动画以防止布局搞砸？

Question

我有一个 KPI 列表，其样式带有顺风，使用 Count Up 动画。动画从数字长度 0 开始，到 19348 结束。space- 和数字宽度的这种差异导致布局发生变化。

我怎样才能防止这种情况发生，或者将 Count Up 设置在“容器”（具有固定宽度？）中，这样它就不会动摇布局的其余部分？

这是组件布局：

{/* Your Balance */}
<div className="flex-nowrap">


    <h2 className="text-xl">Your Balance</h2>

    <div className="flex justify-center items-center">
        <h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">
            <CountUp end={19348} />CHF</h1>


        <svg width="21px" height="14px" className="ml-5 mx-auto align-items-center">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="02_B_Home_Light" transform="translate(-266.000000, -253.000000)" fill="#00C092">
                    <polygon id="Triangle" points="276.5 253 287 267 266 267"></polygon>
                </g>
            </g>
        </svg>

    </div>


</div>

{/* Weeks Returns */}
<div className="flex-nowrap">
    <h2 className="text-xl">Week's returns</h2>

    <div className="flex justify-center items-center">
        <h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 5.78%</h1>



        <svg width="21px" height="14px" viewBox="0 0 21 14" className="ml-5 mx-auto align-items-center">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="02_A_Home" transform="translate(-589.000000, -253.000000)" fill="#FE3169">
                    <polygon id="Triangle"
                        transform="translate(599.500000, 260.000000) rotate(-180.000000) translate(-599.500000, -260.000000) "
                        points="599.5 253 610 267 589 267"></polygon>
                </g>
            </g>
        </svg>

    </div>
</div>

{/* Month' Returns */}
<div className="flex-nowrap">
    <h2 className="text-xl">Month return</h2>

    <div className="flex justify-center items-center">
        <h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>


        <svg width="21px" height="14px" className="ml-5 mx-auto align-items-center">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="02_B_Home_Light" transform="translate(-266.000000, -253.000000)" fill="#00C092">
                    <polygon id="Triangle" points="276.5 253 287 267 266 267"></polygon>
                </g>
            </g>
        </svg>

    </div>
</div>

{/* YTD Return */}
<div className="flex-nowrap">
    <h2 className="text-xl">Year to date return</h2>

    <div className="flex justify-center items-center">
        <h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>


        <svg width="21px" height="14px" className="mx-auto ml-5 align-items-center">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="02_B_Home_Light" transform="translate(-266.000000, -253.000000)" fill="#00C092">
                    <polygon id="Triangle" points="276.5 253 287 267 266 267"></polygon>
                </g>
            </g>
        </svg>

    </div>
</div>

Answer 1

发生这种情况是因为justify-between设置了一个宽度“auto”，你只需要为每个子框设置一个宽度，例如w-1/4，你有4个框所以...

<div class="flex flex-row justify-between  bg-black">
  <div class="flex-nowrap w-1/4">
    <div class="flex justify-center items-center">
        <h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">
            <span class="change-me">1</span> CHF</h1>

    </div>
</div>

<div class="flex-nowrap w-1/4">    

    <div class="flex justify-center items-center">
        <h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 5.78%</h1>
    </div>
</div>

<div class="flex-nowrap w-1/4">

    <div class="flex justify-center items-center">
        <h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>

    </div>
</div>

<div class="flex-nowrap w-1/4">
    <div class="flex justify-center items-center">
        <h1 class="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">+ 2.21%</h1>
    </div>
</div>
</div>

React / Tailwind：如何保持动画以防止布局搞砸？

React / Tailwind: how can I keep an animation in place to prevent layout screwups?

html

css

animation

reactjs

tailwind-css