Si hace clic en "algún texto" en el ejemplo, el elemento se crea y debería moverse 100px hacia arriba con la transición. No puedo hacerlo con js DOM o css class switch. Echo de menos algo, pero no puedo encontrar el vientre de la bestia. ¿Tal vez error tipográfico? ¿O algún principio?
otros tipos de solución también son bienvenidos..
¡gracias!
var ul = document.getElementById('timeline'); ul.addEventListener('click', function(e) { if (e.target.tagName === 'LI') { let star = document.createElement("div"); star.className = "star"; e.target.insertBefore(star, e.target.getElementsByTagName("time")[0]); star.style.transform = "translateY(-100px)"; star.style.transition = "all 2s linear"; } }); .wrap-timeline { position: relative; left: 100px; } .wrap-timeline ul { list-style-type: none; } .wrap-timeline ul li { margin: 100px 50px; } .wrap-timeline ul li time { position: absolute; left: -100px; } .wrap-timeline ul li .star { position: absolute; left: 5px; width: 50px; height: 20px; z-index: 2; background-color: blue; } time::before { content: ""; background-color: red; width: 65px; height: 35px; position: absolute; left: 100px; top: -10px; z-index: 3; } <div class="wrap-timeline"> <ul id="timeline"> <li><time datetime="XXXX-XX">xxxx</time> some text</li> </ul> </div>