如何在 vanilla js/ts (Angular) 中重启动画并支持 IOS答案

【问题标题】：How to restart animation in vanilla js/ts (Angular) and support IOS如何在 vanilla js/ts (Angular) 中重启动画并支持 IOS
【发布时间】：2021-03-24 22:06:04
【问题描述】：

大家好，我正在尝试创建点击底部，用户可以点击它并重新启动动画据我了解这是不可能的，我们需要销毁动画并再次阅读。所以我一开始是这样尝试的

HTML

<ul> ...

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

    element.style.animation = 'none';
    element.offsetHeight; /* trigger reflow */
    element.style.animation = null;

它只在我的桌面上工作，所以我找到了另一种方法

HTML

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

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

      // -> removing the class
      element.classList.remove("run-animation");
       element.offsetHeight;
      // -> and re-adding the class
      element.classList.add("run-animation");

它再次在我的桌面上完美运行，但我也需要它在移动设备上运行

我该怎么做？我正在使用 Angular-9

谢谢大家！！

@AshishYadav 我添加了一个link

【问题讨论】：

您能否附上您的问题的工作演示，因为它是动画内容，它确实有助于我们分析。
我在我的项目中这样做了youtube.com/watch?v=sVZX0XvEBhk&t=892s
你的例子可能会更好。可以尝试在 CodeSandbox 之类的平台上上传吗？
我看到您在再次设置动画之前使用读取 offsetHeight 作为强制回流的努力。这个 [link] stackoverflow.com/questions/60361968/… 有一些讨论似乎表明 Safari 的行为可能与 Chrome/FF 不同。
你在使用角度吗？这不是 Angular 中应该使用动画的方式

标签： javascript html css angular css-animations

【解决方案1】：

您可以使用toggle 在 JavaScript 中切换类。

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

// in your click event
element.classList.toggle('run-animation');

【讨论】：

如果我在 'element.classList.add("run-animation");' 之后添加这个没有任何工作，如果我在它之前在移动设备上什么都不做之前使用它，它不能只在桌面上工作
您需要替换您的classList.add 和classList.remove 并使用上面的代码。切换添加/删除类。
Toggle 确实删除/添加了类，但是代码将无处可尝试强制回流，AFAIK。
这就是我要求执行 OP 的原因，以便我们可以正确分析和应用重置。目前，我假设该类已完成所有翻译，并且在删除该类时它会重新设置，从而使一切恢复正常。
当我删除 classList.add 和 classList.remove 时，我需要单击 2 次，它可以工作（第一次停止，第二次播放）但是当我删除 classList.remove 时它不起作用跨度>

【解决方案2】：

大家好，经过努力，我找到了解决方案，我来分享一下。

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

      element.style.animation = "none";
      element.offsetHeight; /* trigger reflow */

      setTimeout(() => element.style.animation = null, 1);

在你设置了一些间隔后，它会应用element.style.animation = null;这一行

重要的是你知道它支持角度和智能手机包括 IOS

【讨论】：