【问题标题】：ngAnimate 1.2 with ngShow/ngHide带有 ngShow/ngHide 的 ngAnimate 1.2
【发布时间】：2014-03-07 08:19:12
【问题描述】：

我正在尝试将 CSS3 转换添加到我的代码中，但对这些类的含义感到困惑：

.ng-hide-add
.ng-hide-active

和

.ng-hide-remove 
.ng-hide-remove-active

我试图用这个添加一个简单的缓入和缓出，但不确定我应该将它添加到哪些类！

【问题讨论】：

标签： angularjs ng-animate

【解决方案1】：

在元素上添加 animate-show 类以显示/隐藏添加 ng:show 参数和相应的表达式

<div class="animate-show" ng:show="expression">
    My content hide and show.
</div>

【讨论】：

【解决方案2】：

复合解决方案

有动画隐藏/显示的完整解决方案（复杂示例）： https://github.com/mirekh/Todolist_app_bootstrap

或者试试下面的例子。

1。 HTML 文件

1.1。放入文件 index.html 的正文中

/* 文件 index.html（正文） */

<p>
    Click this: <input type="checkbox" ng-model="checked">
</p>
<div>
    <div class="check-element animate-show" ng-show="checked">
        <span class="glyphicon glyphicon-thumbs-up"></span>
        I show up when your checkbox is checked.
    </div>
</div>
<div>
    <div class="check-element animate-show" ng-hide="checked">
        <span class="glyphicon glyphicon-thumbs-down"></span>
        I hide when your checkbox is checked.
    </div>
</div>

记住两行： + <script src="lib/angular/angular-animate.js"></script> + <link rel="stylesheet" href="css/animation.css"/>

1.2。完成 index.html

完整的 index.html 看起来像这样：

/* 文件索引.html */

<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Todolist AngularJS App</title>
    <!-- css -->
    <link rel="stylesheet" href="css/app.css"/>
    <link rel="stylesheet" href="css/animation.css"/>
</head>
<body>
    <!--
    insert main code here (body from [1])
    -->

    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-animate.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <!-- opional -->
    <script src="js/factories.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
</body>
</html>

2。 CSS 文件

/* 文件：animations.css */

.animate-show {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    line-height:20px;
    opacity:1;
    padding:10px;
    border:1px solid black;
    background:white;
}

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

.animate-show.ng-hide {
    line-height:0;
    opacity:0;
    padding:0 10px;
}

.check-element {
    padding:10px;
    border:1px solid black;
    background:white;
}

【讨论】：