web javascript - 转换延迟答案

【问题标题】：web javascript - transition delayweb javascript - 转换延迟
【发布时间】：2019-06-18 00:44:48
【问题描述】：

我正在为一个 Web 项目中的两个元素的入口过渡设置动画。可以在下面找到 Javascript 文件中的转换。我没有提供所有代码，我认为这是一个非常具体的代码检查问题。如果你想要我能提供的所有代码..

“right_Groot”和“right_Klein”两个元素，问题是关于“right_Klein”的过渡。这是具有两个独立动画属性的过渡。有向右移动和旋转。

我想试验一下轮换的过渡延迟，这样我就可以看到最吸引人的延迟是什么。这不起作用..

function Right_Entry(e){

if (window.scrollY > 1050){

    right_Groot.style.right ="20vw";
    right_Groot.style.setProperty("-webkit-transition", "right 1s linear");
    right_Groot.style.setProperty("transition", "right 1s linear");

    right_Klein.style.right = "35vw";
    right_Klein.style.transform = "rotate(-135deg)";

    right_Klein.style.setProperty("-webkit-transition-property", "right, transform");
    right_Klein.style.setProperty("transition-property", "right, transform");

    right_Klein.style.setProperty("-webkit-transition-duration", "1s, 1s");
    right_Klein.style.setProperty("transition-duration", "1s, 1s");

    right_Klein.style.setProperty("-webkit-transition-timing-function" ,"linear, linear");
    right_Klein.style.setProperty("transition-timing-function", "linear, linear");

    //delay is not reacting
    right_Klein.style.setProperty("-webkit-transition-delay", "0, 2s");
    right_Klein.style.setProperty("transition-delay", "0, 2");
}
}

所以这是不工作的部分：

    //delay is not reacting
    right_Klein.style.setProperty("-webkit-transition-delay", "0, 2s");
    right_Klein.style.setProperty("transition-delay", "0, 2");

我的代码有什么问题？

谢谢！

【问题讨论】：

不同浏览器的不同动画过渡名称/值，例如Chrome vs Safari vs. Mozilla
好的，谢谢你的评论，我会适应的，但是其余的代码正在运行..这就是我认为这不是故障的原因..
我找到了！我在“0”之后的几秒钟内错过了“s”..所以“0s”而不是“0”..

标签： javascript transition

【解决方案1】：

备注1：
我需要为所有浏览器添加代码..

备注2：
//延迟没有反应 right_Klein.style.setProperty("-webkit-transition-delay", "0, 2s"); right_Klein.style.setProperty("transition-delay", "0, 2");

改为.. right_Klein.style.setProperty("-webkit-transition-delay", "0s, 2s"); right_Klein.style.setProperty("transition-delay", "0s, 2s");

【讨论】：