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 don工作时。谁知道我错过了什么？

谢谢：）

在这里，你有一个能够展示我刚暴露出来的东西。

DEMO

Answer 1

像这样编辑你的HTML：

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

这应该有效。

随机类应该与显示/隐藏的元素一起使用，它应该与ng-if

一起使用

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

1 个答案: