Javascript: reviving transition effects after they stop working

ok, if a transition is set on a style via CSS it works and keeps working as long as the style is not changed by Javascript (then the transition stops) even if the Javascript restores the original property to its former value.

Is there a way to revive a transition after a style has been "touched" ?

For example once the Javascript sets the width to the value of 100px (which was the CSS value) the transition stops.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>
<div id="test"></div>

<script>
var el = document.getElementById("test");
el.style.width = "100px";
</script>
</body>
</html>