小编Chr*_*ert的帖子

我已经将基于Codrops的书页翻页动画重写为使用更少JavaScript的更轻量级版本。我的动画可以在Firefox（和Safari）中按需运行，但不能在Chrome中运行。

单击图片的右半部分获取下一张图片，Chrome不会在反面显示图片。出于演示目的，我设置 background: red并创建了div.helper-class-to-make-bug-visbile使其background: red可见。它仅在图片第一次翻转时发生。当我返回并再次翻转时，动画不再滞后。这很烦人，即使动画只在第一回合时滞后。

演示：https : //codepen.io/pizzabote/pen/xxxXmXN

如何解决此问题，使演示中的动画也能在Chrome中正常工作（第一次翻转图像而不会出现滞后现象）？还是这是Chrome中的错误？

我在macOS Mojave上使用的是Chrome版本78.0.3904.87（正式版本）（64位）。在Windows上，此Chrome版本的动画对我也不起作用。

HTML部分：

<div class="container">
    <div class="page" id="first">
        <div class="back">
            <div class="outer">
                <div class="content">
                    <img src="img/1.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="second">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="img/1.jpg">
                </div>
            </div>
        </div>
        <div class="back" id="third">
            <div class="outer">
                <div class="content">
                    <div class="helper-class-to-make-bug-visbile">
                        <img src="img/2.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="fourth">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="img/2.jpg"> …