When I set a transition for an element in my style sheet, along with some template HTML code, the transition works fine if I delay setting the attribute in JavaScript. However, it doesn't work without the delay. I think this is because both processes are being evaluated at the same time. Is there a more effective way to handle this situation?
<html>
<head>
<style>
div {
width:0%;
height: 100px;
background: red;
transition: width 2s;
}
</style>
<script>
/*
//this does work
setTimeout(()=>{
document.querySelector("div").style.width="100%";},1000);
*/
//this does not work
document.querySelector("div").style.width="200%";}
</script>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>