Angular9中用原生JS/TS重启CSS动画并兼容iOS的实现方法

我需要实现点击按钮时重新触发CSS动画的交互效果。根据此前的了解，CSS动画无法直接重置，需要先销毁原有动画再重新添加，我先后尝试了两种方案，但二者都仅在桌面端生效，移动端无法正常运行。当前使用的框架版本为Angular 9，请问该如何调整才能让该动画重置逻辑在移动端也正常生效？

第一次尝试的方案 #

HTML代码 #

<ul> ...

TS代码 #

const element: HTMLUListElement = document.querySelector('.packages>.ulWrapper>ul');

element.style.animation = 'none';
element.offsetHeight; /* 触发重排 */
element.style.animation = null;

该方案仅在桌面端生效，移动端无预期效果。

第二次尝试的方案 #

HTML代码 #

<ul id="logo" class="run-animation"> ...

TS代码 #

var element = document.getElementById("logo");

// 移除动画类
element.classList.remove("run-animation");
element.offsetHeight;
// 重新添加动画类
element.classList.add("run-animation");

该方案同样仅在桌面端运行正常，移动端不生效，已附上对应示例代码供参考。

内容的提问来源于stack exchange，提问作者Lichay Tiram