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

Posted 2023-03-06

【中文标题】将 ngAnimate 与 ng-show/ng-hide 一起使用

【英文标题】：Using ngAnimate with ng-show/ng-hide

【发布时间】：2018-02-27 11:14:31

【问题描述】：

我有这个 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

【问题讨论】：

您能更准确地了解您的问题吗？如果您向我们展示template.html的内容，那就太好了

我刚刚添加了它。这一切都在笨拙的地方。基本上，当我按下隐藏或显示时，我希望它采用我在 ng-leave 和 ng-enter 上设置的 de 配置

别忘了将答案标记为正确，这样话题就结束了；）

【参考方案1】：

像这样编辑你的html：

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

这应该可以。

random 类应该与显示/隐藏的元素一起使用，并且应该使用 ng-if

【讨论】：

非常感谢！！我不知道它需要与 ng-if 位于同一元素中