Javascript 中断CSS动画会导致奇怪的转换

我一直在尝试创建“卡片”，当你点击它们到窗口的整个视口时，它们会展开。它一直进展顺利，除了在动画完成之前中断动画，它会导致一些图形故障。我使用CSS转换而不是Javascript动画（我只是使用JQuery来原型化所需的类更改），CSS中的实现也存在这个问题。请在这里使用JSFIDLE链接：因为代码似乎不能在StackOverflow上正常工作

$（窗口）.on（“单击“，”.small“，函数（））{
我=这个；
setTimeout（function（）{$（me）.addClass（“big”）；}，1）；
});
$（窗口）.on（“单击”、“.big”，函数（）{
我=这个；
setTimeout（function（）{$（me）.removeClass（“big”）；}，1）；
});
div.small{
背景：#f00；
宽度：计算（（100%-4rem-4rem）/3）；
高度：计算（（100%-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：6；
顶部：2rem；
左：2rem；
过渡：全部5秒；
}
小分区{
背景：黑色；
宽度：计算（（100%-4rem-4rem）/3）；
高度：计算（（100%-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：5；
顶部：2rem；
左：计算（（100%-4rem-4rem）/3）+4rem）；
过渡：全部5秒；
}
最小分区{
背景：蓝色；
宽度：计算（（100%-4rem-4rem）/3）；
高度：计算（（100%-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：4；
顶部：2rem；
左：计算（（（100%-4rem-4rem）/3）*2）+6rem）；
过渡：全部5秒；
}
更小的{
背景：绿色；
宽度：计算（（100%-4rem-4rem）/3）；
高度：计算（（100%-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：3；
顶部：计算（（100%-6rem）/2）+4rem）；
左：2rem；
过渡：全部5秒；
}
非常小的{
背景：粉红色；
宽度：计算（（100%-4rem-4rem）/3）；
高度：计算（（100%-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：2；
顶部：计算（（100%-6rem）/2）+4rem）；
左：计算（（（100%-4rem-4rem）/3）*1）+4rem）；
过渡：全部5秒；
}
小得惊人{
背景：橙色；
宽度：计算（（100%-4rem-4rem）/3）；
高度：计算（（100%-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：1；
顶部：计算（（100%-6rem）/2）+4rem）；
左：计算（（（100%-4rem-4rem）/3）*2）+6rem）；
过渡：全部5秒；
}
大分区{
宽度：100%！重要；
身高：100%！重要；
顶部：0！重要；
页边距顶部：0！重要；
左：0！重要；
左边距：0！重要；
边界半径：0！重要；
}
这似乎确实是一个Safari bug，由使用相对单位触发。

显然，它们无法从当前状态恢复到基于百分比的值

因此，您需要使用绝对单位来解决该问题。

在您的情况下，您只需将所有初始的
宽度：[..]][..]
替换为
宽度：[..]vw[..]
，将所有
高度
替换为
vh


$（窗口）.on（“单击“，”.small“，函数（））{
我=这个；
setTimeout（function（）{$（me）.addClass（“big”）；}，1）；
});
$（窗口）.on（“单击”、“.big”，函数（）{
我=这个；
setTimeout（function（）{$（me）.removeClass（“big”）；}，1）；
});
div.small{
背景：#f00；
宽度：计算（（100vw-4rem-4rem）/3）；
高度：计算（（100vh-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：6；
顶部：2rem；
左：2rem；
过渡：全部5秒；
}
大分区{
宽度：100vw；
高度：100vh；
排名：0；
边际上限：0；
左：0；
左边距：0；
边界半径：0；
}
这似乎确实是一个Safari bug，由使用相对单位触发。

显然，它们无法从当前状态恢复到基于百分比的值

因此，您需要使用绝对单位来解决该问题。

在您的情况下，您只需将所有初始的
宽度：[..]][..]
替换为
宽度：[..]vw[..]
，将所有
高度
替换为
vh


$（窗口）.on（“单击“，”.small“，函数（））{
我=这个；
setTimeout（function（）{$（me）.addClass（“big”）；}，1）；
});
$（窗口）.on（“单击”、“.big”，函数（）{
我=这个；
setTimeout（function（）{$（me）.removeClass（“big”）；}，1）；
});
div.small{
背景：#f00；
宽度：计算（（100vw-4rem-4rem）/3）；
高度：计算（（100vh-6rem）/2）；
位置：绝对位置；
边界半径：0.5雷姆；
z指数：6；
顶部：2rem；
左：2rem；
过渡：全部5秒；
}
大分区{
宽度：100vw；
高度：100vh；
排名：0；
边际上限：0；
左：0；
左边距：0；
边界半径：0；
}

我没有看到这个问题（Firefox，Win10）。此问题发生在哪个浏览器的哪个平台上？抱歉，请参阅编辑。似乎是Safari上的一个问题（我知道），很高兴知道它在Firefox中工作。我需要这个在Safari中工作，所以你知道是什么导致了这个吗？我想是MacOS上的Safari？是的，没错。哪个MacOS？哪个Safari版本？我没有看到这个问题（Firefox，Win10）。此问题发生在哪个浏览器的哪个平台上？抱歉，请参阅编辑。似乎是Safari上的一个问题（我知道），很高兴知道它在Firefox中工作。我需要这个在Safari中工作，所以你知道是什么导致了这个吗？我想是MacOS上的Safari？是的，没错。哪个MacOS？哪个Safari版本？很烦人，但有一个简单的修复。谢谢。很烦人，但有一个简单的解决办法。谢谢