ngAnimate工作在ng-leave但不是ng-enter

Question

考虑以下CSS：

nav {
  position: fixed;
  z-index: 1900;
  top:0; right:0; bottom:0;
  width: 60px;
  -webkit-transition: right 600ms cubic-bezier(.3,1,.5,1);
  -moz-transition: right 600ms cubic-bezier(.3,1,.5,1);
  -o-transition: right 600ms cubic-bezier(.3,1,.5,1);
  transition: right 600ms cubic-bezier(.3,1,.5,1); }

nav.ng-enter { right: -60px; }
nav.ng-enter.ng-enter-active { right: 0; }

nav.ng-leave { right: 0; }
nav.ng-leave.ng-leave-active { right: -60px; }

当然，我在HTML中的导航栏上有ng-if属性：

<nav ng-if="account.isLoggedIn && navIsOpen">
  ...
</nav>

动画在ng-leave上运行正常。我还可以在开发人员工具中看到，ng-enter和ng-enter-active类被添加到正确的转换持续时间，但是不是发生转换，元素就会出现。为什么会这样？