React / Tailwind：如何保持动画到位以防止布局错误？

Posted 2023-03-07

【中文标题】React / Tailwind：如何保持动画到位以防止布局错误？

【英文标题】：React / Tailwind: how can I keep an animation in place to prevent layout screwups?

【发布时间】：2021-09-24 01:25:12

【问题描述】：

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

如何防止这种情况发生，或者将 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   className="ml-5 mx-auto align-items-center">
            <g id="Page-1" stroke="none" stroke- 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   viewBox="0 0 21 14" className="ml-5 mx-auto align-items-center">
            <g id="Page-1" stroke="none" stroke- 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   className="ml-5 mx-auto align-items-center">
            <g id="Page-1" stroke="none" stroke- 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   className="mx-auto ml-5 align-items-center">
            <g id="Page-1" stroke="none" stroke- 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>

【参考方案1】：

这是因为justify-between 设置了宽度“自动”，您只需为每个子框设置宽度，例如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>