如何在我的情况下创建显示和隐藏元素？答案

【问题标题】：How to create show and hide an element in my case?如何在我的情况下创建显示和隐藏元素？
【发布时间】：2014-05-22 01:54:03
【问题描述】：

我遇到了一个奇怪的问题，即在我的应用程序中未显示。

我有类似的东西

<ul ng-click="open =!open">
    ….
</ul>

当我点击我的ul, 时，我想为div 设置动画以显示。

所以我有

<div id='wrapper' ng-show='open'>
    …..
</div>

我能够显示和隐藏我的 wrapper div，但我需要在过渡期间制作动画。

所以我添加

.ng-hide {
  opacity: 1.0;
  display: block !important;
  transition: opacity 2s;
}

.ng-hide {
  opacity: 0;
}

.ng-show {
  opacity: 1;
  display: block !important;
  transition: opacity 1s;
}

.ng-show {
  opacity: 0;
}

原来hide 动作会有 2 秒的动画，但 show 动作没有。

谁能帮我解决这个问题？我真的很难理解它。

谢谢。

【问题讨论】：

你在这方面的尝试有什么更新吗？
@FlyingCat：您尝试过以下任何解决方案吗？它对你有用吗？

标签： javascript css angularjs animation

【解决方案1】：

ngShow（就像ngHide）添加/删除ng-hide 类以显示或隐藏元素。

要使用ngHide/ngShow 启用动画，您需要将ngAnimate 模块作为依赖项添加到您的应用中。
ngAnimate 将添加一些额外的类，这些类将使您的动画能够使用 CSS 正确定义。

The docs 有关于如何实现这一点的详细说明（这是针对v1.2.16）。请注意，根据 Angular 的版本，动画可能需要以不同的方式定义（例如，v1.3 中的内容发生了变化）。

下面的解决方案是基于v1.2.16:

// HTML
<div id="wrapper" class="animate-show" ng-show='open'>...

// CSS
.animate-show {
    opacity: 1;
    transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
    display: block !important;
}

.animate-show.ng-hide {
    opacity: 0;
}

另请参阅此short demo。

【讨论】：

【解决方案2】：

如果你在隐藏和显示你的 div 的同时观察 DOM，你会看到当一个元素被隐藏时，ng-hide 被添加到它的类列表中，但是当元素被隐藏时没有对应的 ng-show 类被添加显示。这就是为什么在隐藏元素时看到动画但在显示时却没有的原因。

动画最好的选择是ngAnimate。

加载脚本：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.9/angular-animate.js"></script>

将模块注入应用程序：

angular.module('myApp', ['ngAnimate']);

使用 ngAnimate 类：

.ng-hide-add,
.ng-hide-remove {
  display:block!important;
}

.ng-hide-add.ng-hide-add-active {
  transition:all linear 2s;
}

.ng-hide-remove.ng-hide-remove-active {
  transition:all linear 1s;
}

.ng-hide {
  opacity:0;
}

Plunker Demo

更新：我看到@ExpertSystem 刚刚发布了类似的说明，请注意我的代码使用 Angular 和 ngAnimate 的 1.3 版本。因此，根据您使用的 Angular 版本，您很可能会按照他们或我的来设计您的代码。

【讨论】：