任何人都可以解释一下为什么这个过渡不起作用？

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

中找到替代解决方案