为什么 CSS 过渡在单击菜单按钮时不起作用？

Question

每当我点击菜单时，class 'active' 就会添加到 'div' 和 'section' 中，如图所示。

用于执行上述操作的 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>

class首页和切换的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 link 到项目：https://github.com/rajas2716/rajas2716.github.io

Answer 1

你需要在.front-page规则中的默认状态中添加一个right值0（即转换开始的值），你需要写“全部”或“正确”进入 transition 设置，例如 transition: all 0.5s.

为什么 CSS 过渡在单击菜单按钮时不起作用？

Why is CSS transition not working upon clicking menu button?

html

javascript

css

transition