为什么单击菜单按钮时 CSS 转换不起作用？

Question

每当我点击菜单时，“活动”类就会添加到“div”和“部分”中，如图所示。

用于执行上述操作的 javascript 代码是

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

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

类首页和切换的CSS如图所示

所以页面向右移动但没有发生如图所示的过渡

我是菜鸟，所以请告诉我为什么这种转换不起作用

索引文件：https://github.com/rajas2716/rajas2716.github.io/blob/master/index.html

CSS 文件：https://github.com/rajas2716/rajas2716.github.io/blob/master/css/styles.css

Github 项目链接：https://github.com/rajas2716/rajas2716.github.io

Answer 1

您需要在right规则中的默认状态中添加0的{​​{1}}值（即转换开始的值），并且需要写“所有" 或 "right" 进入 .front-page 设置，例如 transition。