Because that's what DOMContentLoaded does : it fires when the DOM has been parsed, but before the CSSOM has been (and thus before styles have been applied).
If you don't want to wait for the load event,
one way is to force the browser to paint before your script execution (synchronously), by calling offsetXXX property on any document's element (e.g <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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
