Question

我不希望在没有任何转换或动画的情况下弹出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效果。

我怎样才能使css最初的不透明度为0，直到ng-show被触发？

此外，Angular animate如何运作的最佳类比是什么？ .list-group-item.media.region_flag_california的每个CSS都包含特定的状态吗？比如开始，中间和结束？有点像视频如何包含一个接一个显示的帧？

Answer 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张） ngShow Animation Cheatsheet

使用AngularJS进行极其简单的ng-show动画

1 个答案: