If you click on "some text" in example, the element is created and than it should move 100px up with transition. I am not able to do it with js DOM or css class switch. I miss something, but I am not able to find out belly of the beast. Maybe typo? Or some principle?
other types of solution are also welcome..
thank you!
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>