I'm really struggling with CSS transitions and trying to figure out why my transition for the div class=text is not working as expected.
const menuToggle = document.querySelector('.toggle')
const showCase = document.querySelector('.showcase')
const text = document.querySelector('.text')
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active')
showCase.classList.toggle('active')
text.classList.toggle('active')
}).text {
position: absolute;
z-index: 6;
transition-duration: 0.9s;
transition-timing-function: ease;
}
.text.active {
left: 950px;
}<div class="text">
<h2>This</h2>
<h3>Transition</h3>
<p>
Lorem
</p>
<a href="#">Hover</a>
</div>If you want to see the complete code, check it out on Codepen: https://codepen.io/Code_Blues/pen/vYgGeXQ
I'm attempting to make the div class=text slide to the right with a smooth transition when the menu toggle is clicked, but unfortunately, it's not functioning correctly.
Could someone offer some guidance or point out what I might be doing incorrectly? Any help would be greatly appreciated.
Thank you in advance!