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

【问题标题】：Why is CSS transition not working upon clicking menu button?为什么 CSS 过渡在单击菜单按钮时不起作用？
【发布时间】：2021-09-12 22:57:27
【问题描述】：

每当我点击菜单时，都会将一个“活动”类添加到“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

【问题讨论】：

标签： javascript html css transition

【解决方案1】：

您需要在.front-page规则中的默认状态（即转换开始的值）中添加0的right值，并且您需要将“all”或“right”写入transition 设置，如 transition: all 0.5s。

【讨论】：