为啥在这种情况下转换属性不起作用？ [复制]

Posted 2023-02-18

【中文标题】为啥在这种情况下转换属性不起作用？ [复制]

【英文标题】：Why is transition property not working in this case? [duplicate]为什么在这种情况下转换属性不起作用？ [复制]

【发布时间】：2022-01-21 01:52:44

【问题描述】：

我正在创建一个汉堡菜单，并使用 javascript 来处理菜单的打开和关闭。这是我的代码的样子：

const hamburger_menu = document.querySelector('.hamburger-menu');
const side_nav = document.querySelector('.side-nav');

hamburger_menu.addEventListener('click', () => 
    side_nav.classList.toggle('open');
)

单击汉堡菜单时，脚本将切换隐藏菜单上的“打开”类。我希望菜单在出现时具有过渡效果。这是我的 SCSS 的样子：

.side-nav 
    background: $black;
    display: none;
    padding: 5rem;
    position: absolute;
    top: 10.4rem;
    right: 0;
    bottom: -1.6rem;
    left: 0;
    opacity: 0;
    transition: all .3s ease;
    z-index: 100;

    &.open 
        display: block;
        opacity: 1;
    

不知何故，过渡效果不起作用。有谁知道原因吗？

【参考方案1】：

因为您在display: block; 和display: none; 之间切换。 它不会触发转换。

相反，您可以通过将高度、不透明度或宽度从 0 调整为设定值来隐藏/显示。除了高度、不透明度和宽度之外，很可能还有更多的方法。然后将触发从值 0 到值 x 的转换。

【参考方案2】：

用 Visibility 替换 Display 属性可以帮助你。 可见性：隐藏 => 可见。

【参考方案3】：

转换永远不会对显示属性起作用。它适用于宽度、高度、不透明度等属性。 在您的特定情况下，您可以做的是使用高度或宽度来控制此动画。 如果您的侧边栏将从左侧出现，那么您需要将初始宽度设置为 0，然后将宽度设置为单击时的实际宽度。像这样：

.side_nav  
  width: 0;
  transition: width 1s;
 
  &.open  
    width: 200px; 
  
 

现在，当公开课附加到您的汉堡包上时，它将为宽度设置动画。