动画无法按预期运行/在Safari中表现怪异

问题描述

如果未设置Cookie“ AnimationShowed”，我制作了一个仅会启动的加载动画。一旦浏览器关闭，Cookie就会自行删除。

在摄像机镜头的动画之前是一个加载栏，这是发生错误的地方。 预期的行为可以在Google Chrome和Firefox甚至Microsoft Edge上正常运行，如下所示：

-加载栏动画达到40％。
-动画之后，将宽度设置为40％，并删除动画类。
-Width设置为100％，条形从40％过渡到100％。

但是在Safari中，会发生以下情况：

-加载栏动画化为40％。
-动画之后，将宽度设置为40％，并删除动画类。
-Width设置为100％，条形从0％（???）过渡到100％

代码如下：

这部分来自Anna_Samlidou_Vitals_Footer.js，如果没有cookie“ AnimationShown”，则使加载栏的所有内容可见。它为加载栏的两个部分提供了两个动画类，并在完成后立即添加了一个事件侦听器（它们都花了相同的时间）。

if(CookieVitalsSet == false){
   document.getElementById("Loading-Screen-Background").style.display = "block";
   document.getElementById("Loading-Screen-Container").style.display = "block";
   document.getElementsByClassName("Loading-Screen-Darker")[0].addEventListener("animationend",LoadingBaranimated);
   document.getElementsByClassName("Loading-Screen-Darker")[0].classList.add("Loading-Screen-Animation-Negativ");
   document.getElementsByClassName("Loading-Screen-Photo-Wrapper-Rainbow")[0].classList.add("Loading-Screen-Animation-Positiv");
}

动画完成后，将调用Anna_Samlidou_Vitals.js中的函数LoadingBaranimated。它将宽度设置为40％，然后删除动画类。然后，它要么为大型svg设置事件监听器以加载它，要么在已经存在的情况下立即启动该函数。

function LoadingBaranimated(){
   console.log("first animated started");
   document.getElementsByClassName("Loading-Screen-Photo-Wrapper-Rainbow")[0].style.width = "40%";
   document.getElementsByClassName("Loading-Screen-Photo-Wrapper-Rainbow")[0].classList.remove("Loading-Screen-Animation-Positiv");0
   console.log(document.getElementsByClassName("Loading-Screen-Photo-Wrapper-Rainbow")[0].style.width);
   document.getElementsByClassName("Loading-Screen-Darker")[0].style.width = "60%";
   document.getElementsByClassName("Loading-Screen-Darker")[0].classList.remove("Loading-Screen-Animation-Negativ");
   console.log(document.getElementsByClassName("Loading-Screen-Darker")[0].style.width);
   console.log(document.getElementsByClassName("Loading-Screen-Photo-Wrapper-Rainbow")[0].classList);
   console.log(document.getElementsByClassName("Loading-Screen-Darker")[0].classList);
   console.log("first animated finsihed");

   setTimeout(function(){
       document.getElementById("LinseSVG").addEventListener("onload",CameraLenseLoaded);
       if(document.getElementById("LinseSVG")){CameraLenseLoaded();}
   },300);
}

还在Anna_Samlidou_Vitals.js中，加载了大的svg，它删除了设置cookie时显示的替代简单动画（id为“ Vorhang”）。还将条的宽度设置为100％，并为完成的过渡添加和事件监听器：

function CameraLenseLoaded(){
   LenseLoaded = true;
   document.getElementById("Vorhang").style.left = "-150vw";
   document.getElementsByClassName("Loading-Screen-Darker")[0].addEventListener("transitionend",LoadingBarLoaded);
   document.getElementsByClassName("Loading-Screen-Darker")[0].style.width = "0%";
   document.getElementsByClassName("Loading-Screen-Photo-Wrapper-Rainbow")[0].style.width = "100%";
   console.log("CameraLenseLoaded finished");
}

在函数LoadingBarLoaded中，条消失并且svg开始其动画，这已经超过了错误，据我所知，这与问题无关。我认为在将宽度设置为40％，删除动画类以及将宽度设置为100％之间发生了一些奇怪的事情。

当我在控制台中使用js手动提供动画类时，将宽度设置为40％，删除动画类，然后将宽度设置为100％，即可按预期工作。但是由于某种原因，它无法使用该文件。

该网站的地址为：https://anna-samlidou.com。它尚未响应，因此只能在PC上正确显示。

我如何才能使动画按照Safari中的意图工作？为什么会表现得如此？
请记住，为了再次观看动画，您需要删除cookie“ AnimationShown”。

致以最诚挚的谢意！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）