jquery - 谁能解释一下为什么这个 Transition 不起作用？

Question

所以我制作了这个移动导航，一切正常。我的菜单图标变成了 X，我可以使用 jQuery 切换 is-open 类。但是我无法让这个简单的过渡工作，这让我发疯。谁能帮帮我？

.mobile-nav
  background: rgba(0,0,0,1)
  display: none
  padding: 20px 0
  position: absolute
  top: 44px
  transform: translateY(-100%)
  transition: all 0.3s ease-in-out
  width: 100%

@media (max-width: 770px)
  .mobile-nav.is-open
    display: block
    transform: translateY(0%)

Answer 1

据我所知，您不能为具有 display:none 的元素设置动画。

这就是您的动画不工作的原因。您可以在此 answer 中找到替代解决方案