ng-show

Posted 2020-08-20

//当ng-show=“false”时，自动添加
#animate.ng-hide { }  
#animate.ng-hide-add { } 
#animate.ng-hide-add.ng-hide-add-active { }

//当ng-show=“true”时，自动添加
#animate.ng-hide-remove { }  //当点击show时，自动添加
#animate.ng-hide-remove.ng-hide-remove-active { } //当点击show时，自动添加

过程：当点击按钮show，当下给关注的elem会去除ng-hide，同时补上3个class “ng-animate”，“ng-hide-remove”，“ng-hide-remove-active”。

当点击hide，angular会自动加ng-animate，ng-hide-add，ng-hide-add-active。

animate需要2秒完成，2秒后elem会去除之前所给的class。

AngularJS Animation是如何运作的？

 https://my.oschina.net/tommyfok/blog/298082

http://www.cnblogs.com/stooges/archive/2014/08/13/3910291.html  原理



实例
  <ion-list>
        <div ng-repeat="group in groups">
          <ion-item class="item-stable"
                    ng-click="toggleGroup(group)"
                    ng-class="{active: isGroupShown(group)}">
              <i class="icon" ng-class="isGroupShown(group) ? ‘ion-minus‘ : ‘ion-plus‘"></i>
            &nbsp;
            Group {{group.name}}
          </ion-item>
          <ion-item class="item-accordion"
                    ng-repeat="item in group.items"
                    ng-show="isGroupShown(group)">
            {{item}}
          </ion-item>
        </div>
      </ion-list>

通过line-height的变化实现渐渐收起弹出
.list .item.item-accordion {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
line-height: 0px;
}