是否更好地直接动态更改JS中的转换，或者使用css类？

Question

我有两个元素在滚动时执行简单的介绍动画。我想在回去时扭转过渡速度。

这两种方法都有效，但网站有点滞后，所以我想知道哪一种更适合性能。在这样的javascript中完成..

function startAnimation(){
   elem1.classList.add('transformClass');
   elem2.classList.add('transformClass');

   elem1.style.transition = 'transform 0.6s';
   elem2.style.transition = 'transform 1.4s';
}

function exitAnimation(){
   elem1.classList.remove('transformClass');
   elem2.classList.remove('transformClass');

   elem1.style.transition = 'transform 1.4s'; //elem1 is now 1.4s instead of 0.6s
   elem2.style.transition = 'transform 0.6s';
}

或者将转换合并到添加的类并使用！important

会更好

function startAnimation(){
   elem1.classList.add('transformClass1');
   elem2.classList.add('transformClass2');
}

function exitAnimation(){
   elem1.classList.remove('transformClass1');
   elem2.classList.remove('transformClass2');
}

//CSS:

#elem1 {
   transition: transform 0.6s
}

#elem2 {
   transition: transform 1.4s
}

.transformClass1 {
   transition: transform 1.4s !important;
}

.transformClass2 {
   transition: transform 0.6s !important;
}

Answer 1

我已经完成了这项测试的一些条件。

• 1. 没有给我的HTML代码 - 我必须制作自己的HTML代码，这意味着，这个结果可能不是来自同一来源的。
• 1. 我用来测试JavaScript代码的网站不支持制作外部CSS文件，这意味着，我必须将<style></style>标记用HTML，因此它可能与添加外部不同CSS文件。
• 1. 每个代码的执行次数约为3,000。
• 1. [与＃2相关]由于我必须将<style></style>放在HTML中，这意味着，只能由JavaScript组成的代码与JavaScript和CSS组成的代码一起运行，因为正如我提到<style>标签，它会影响两者。所以我必须单独运行它们。

这是我制作的HTML：

<div id="elem1"></div>
<div id="elem2"></div>
<div class="transformClass1"></div>
<div class="transformClass2"></div>

以下是我得到的结果：

格雷 - 只有JavaScript 绿色 - JavaScript + CSS
越低越好

※网站我已经使用过 - http://jindo.dev.naver.com/jsMatch
来自韩国的Naver制作