将 ngAnimate 与 ng-show/ng-hide 一起使用

Question

我有这个html:

  <div ng-if="true">
    <div ng-show="hideMe">
      <div class="random" ng-include="'template.html'"></div>
    </div>
  </div>

  <br>
  <button ng-click="hideMe = false">hide</button>
  <button ng-click="hideMe = true">show</button>

然后我有这个造型：

.random.ng-enter {
  transition: 2s ease all;
  opacity: 0;
  transform: translateY(100%);
}

.random.ng-enter.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.random.ng-leave {
  transition: 10s ease all;
  opacity: 1;
  transform: translateX(0);
}

.random.ng-leave.ng-leave-active {
  opacity: 0;
  transform: translateX(50%);
}

模板：

<p>a simple paragraph</p>

<div ng-repeat="user in info">
  {{user.nome}}

</div>

当我第一次加载页面时，ng-enter-active 工作正常，但是当我使用按钮隐藏或显示时，ng-enter 和 ng-leave 不起作用。有人知道我错过了什么吗？

谢谢:)

这里有一个 plunker 展示了我刚刚暴露的内容。

DEMO

Answer 1

像这样编辑你html:

<div ng-if="true">
    <div ng-if="hideMe" class="random">
      <div  ng-include="'template.html'"></div>
    </div>
  </div>

这应该有效。

class random 应该与 show/hide 的元素一起使用，并且应该与 ng-if

一起使用

将 ngAnimate 与 ng-show/ng-hide 一起使用

Using ngAnimate with ng-show/ng-hide

css

angularjs

ng-animate

ng-show

ng-hide