javascript - 为什么不立即在DOMContentLoaded上的svg上进行转换？

我有一个设置了转换的svg。现在，当我向其中添加具有某些属性变化的类时，仅当我在DOMContentLoaded事件和addclass事件之间添加延迟时，才会发生过渡。这是两个示例，第一个没有延迟，第二个有无限小的延迟:

，没有延迟:

! function() {
  window.addEventListener('DOMContentLoaded', function() {
    var logo2 = document.querySelector("svg");
    logo2.classList.add('start');
  });
}();

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46">
            <defs>
                <style>
                polygon {
                    fill: red;
                    transition: opacity 3s ease-out, transform 3s ease-out;
                    opacity: 0;
                }

                .start polygon {
                	opacity: 1;
                }

				#A1 polygon {
					transform: translate(100px, 100px);
					transition-delay: 1s;
				}

				/*styles after animation starts*/
				.start #A1 polygon {
					transform: translate(0px, 0px);
				}


            </style>
            </defs>
            <title>Logo</title>
            <g id="A1">

                <polygon  class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" />
            </g>
            </svg>

有延迟:

! function() {
  window.addEventListener('DOMContentLoaded', function() {
    var logo2 = document.querySelector("svg");
    setTimeout(function(){
       logo2.classList.add('start');
    },0);
  });
}();

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46">
            <defs>
                <style>
	                polygon {
	                    fill: red;
	                    transition: opacity 3s ease-out, transform 3s ease-out;
	                    opacity: 0;
	                }

	                .start polygon {
	                	opacity: 1;
	                }

					#A1 polygon {
						transform: translate(100px, 100px);
						transition-delay: 1s;
					}

					/*styles after animation starts*/
					.start #A1 polygon {
						transform: translate(0px, 0px);
					}


                </style>
            </defs>
            <title>Logo</title>
            <g id="A1">

                <polygon  class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" />
            </g>
            </svg>

如您在第二个示例中看到的，我添加了0秒的延迟，但是它导致动画正常工作，为什么？

Update1:好吧...我们都错了:-)

我尝试了没有DOMContentLoaded且没有延迟的相同代码。它仍然不会立即添加过渡:

! function() {

    var logo2 = document.querySelector("svg");
    logo2.classList.add('start');

}();

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46">
            <defs>
                <style>
                polygon {
                    fill: red;
                    transition: opacity 3s ease-out, transform 3s ease-out;
                    opacity: 0;
                }

                .start polygon {
                	opacity: 1;
                }

				#A1 polygon {
					transform: translate(100px, 100px);
					transition-delay: 1s;
				}

				/*styles after animation starts*/
				.start #A1 polygon {
					transform: translate(0px, 0px);
				}


            </style>
            </defs>
            <title>Logo</title>
            <g id="A1">

                <polygon  class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" />
            </g>
            </svg>

我还注意到jQuery不会导致重排。这是一个内联jquery代码的示例，该示例在加载CSSOM之前仍然无法启动ready函数。如果我们有外部jquery，则代替内联jquery，然后在CSSOM准备好后会触发ready事件。我已经了解到CSSOM需要在渲染html dom之后几毫秒的时间。因此，在下载外部jquery之前，CSSOM已准备就绪。 DOMContentLoaded根本不在乎样式表是否已加载，也就是说，CSSOM是否已就绪都不在乎。

最佳答案

因为那是DOMContentLoaded的工作:在解析DOM时，但在CSSOM之前(因此在应用样式之前)，它将触发。

如果您不想等待load事件，请
一种方法是通过调用任何文档元素上的offsetXXX属性(例如<body>)来强制浏览器在脚本执行之前(同步)绘制:

! function() {
  window.addEventListener('DOMContentLoaded', function(){
    document.body.offsetTop; // force a CSS repaint
    var logo2 = document.querySelector("svg");
    logo2.classList.add('start');
  });
}();

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46">
  <defs>
    <style>
      polygon {
        fill: red;
        transition: opacity 3s ease-out, transform 3s ease-out;
        opacity: 0;
      }
      .start polygon {
        opacity: 1;
      }
      #A1 polygon {
        transform: translate(100px, 100px);
        transition-delay: 1s;
      }
      /*styles after animation starts*/
      .start #A1 polygon {
        transform: translate(0px, 0px);
      }
    </style>
  </defs>
  <title>Logo</title>
  <g id="A1">
    <polygon class="right" points="0.33 31.97 0.81 26.09 13.61 3.84 13.13 9.72 0.33 31.97" />
  </g>
</svg>