Search code examples
javascripthtmlcsstransition

Why is CSS transition not working upon clicking menu button?

Whenever I click upon the menu, a class 'active' gets added to the 'div' and the 'section' as shown.

enter image description here

The javascript code used to do the above mentioned is

<script>
    const menuToggle = document.querySelector('.toggle')
    const frontpage = document.querySelector('.front-page')

    menuToggle.addEventListener('click', () =>{
      menuToggle.classList.toggle('active')
      frontpage.classList.toggle('active')
    }) 
</script>

The CSS for the class front-page and toggle are as shown

enter image description here

So the page moves to the right but no transition takes place as shown

enter image description here

I am a noob , so please kindly tell me why is this transition not working

Index File: https://github.com/rajas2716/rajas2716.github.io/blob/master/index.html

CSS File: https://github.com/rajas2716/rajas2716.github.io/blob/master/css/styles.css

Github link to project: https://github.com/rajas2716/rajas2716.github.io

Solution

  • You need to add a right value of 0 to the default state in the .front-page rule (i.e. a value from which the transition starts), and you need to write "all" or "right" into the transition setting, like transition: all 0.5s.