谁能解释一下为什么这个过渡不起作用？

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的元素。

这就是为什么你的动画不工作。