AngularJS 非常简单的 ng-show 动画答案

【问题标题】：Extremely Simple ng-show animation with AngularJSAngularJS 非常简单的 ng-show 动画
【发布时间】：2014-06-27 18:50:11
【问题描述】：

我不希望在没有任何过渡或动画的情况下弹出 HTML 元素，我试图准确了解 AngularJS ngAnimate 指令的工作原理：

这是我希望以动画形式出现的 HTML：

    <a ng-show="county_global_var != undefined" class="list-group-item media region_flag_california">

  <div class="media-body">      

        <div ng-show="current_political == 'administrative_area_level_2'">
        <h5 style="opacity:0.65;"><span id="default_region" class="label label-primary">{$ county_global_var $}</span></h5>

          <span>
            <h6><span class="label label-success">NOW IN CHAT</span></h6>
          </span>         

        </div>   

        <div ng-show="current_political != 'administrative_area_level_2'">
        <h5><span id="default_region" class="label label-primary">{$ county_global_var $}</span></h5>

          <span>
            <h6><span class="label label-default keep-in-front">TAP TO JOIN</span></h6>
          </span>              
        </div>                


  </div>

  <div style="" ></div>
</a>

我已经将“ngAnimate”添加到我的“angular.module”中，并且像在 Django 中一样导入了动画库：

<script src="{% static "bootstrap/js/angular-animate.min.js" %}"></script>

这是 CSS 代码：

.list-group-item.media.region_flag_california.ng-show
{
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:1;
    background-repeat:no-repeat;
    background-size:cover;
    height:90px;
    background-position:center; 
}

所以 CSS 方面是我一无所知的地方，我不知道如何处理 CSS 代码。上面的 CSS 代码添加了 .ng-show ，它没有应用于具有匹配类的锚标记，并且还具有 ng-show 效果。

在触发 ng-show 之前，如何使 css 最初的不透明度为 0？

另外，对于 Angular 动画的工作原理，最好的类比是什么？ .list-group-item.media.region_flag_california 的每个 CSS 是否包含特定状态？比如开头、中间和结尾？有点像视频如何包含一个接一个显示的帧？

【问题讨论】：

标签： html css angularjs

【解决方案1】：

您可以使用一些较新的库来协助制作动画。

NG-FX - 这些是基于 javascript 的动画
ngAnimate.css - 这些是基于 CSS 的动画

另一种选择是只使用Animate.css（这是我过去通常所做的）。但这需要您了解在显示/隐藏过程中应用了哪些类。你假设有各种状态是正确的。

OdeToCode.com 有一个 using Angular with Animate.css 的示例。他很快就解释了这个过程。

另一种解释（刚好碰到这个）：Moving with Angular 1.2 Animation and Animate.css 否则，如果您想更深入地了解ngAnimate 的工作原理，jessicaspacekat 有一些关于如何使用design css transitions using angularjs 的精彩幻灯片。

这张图片取自她的幻灯片（第 64 张幻灯片，共 94 张）

【讨论】：