Javascript ngAnimate CSS动画不适用于ng show&；兽皮

演示：

我在页面上显示了两个复选框和两个小部件。单击复选框将使用

ng show

和

ng hide

隐藏和显示相应的小部件。现在我还想有一个基本的

fadeIn

和

fadeOut

，但是到目前为止运气不好：（显示/隐藏没有任何淡入动画的小部件。你能看到我哪里出了问题吗

控制器

animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
    $scope.widget_manage_quotes = true;
    $scope.widget_manage_customer = true;
});

CSS

HTML

切换小部件1


切换小部件2


小部件1！
小工具2！

看起来正确的样式应该包括

.ng hide add

和

.ng hide remove

：

.reveal-animation.ng-hide.ng-hide-add-active {
    display: block !important;
}
.reveal-animation.ng-hide-remove {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}

我还必须为

.ng hide.ng hide add active

添加样式，以防止

ng hide

在动画期间立即隐藏元素

演示：

<ul>
    <li>
        <input
            ng-click="widget_manage_quotes = !widget_manage_quotes"
            type="checkbox" 
            name="w_manage_quotes"
            id="w_manage_quotes" 
            class="css-checkbox"
            checked />

        <label for="w_manage_quotes" class="css-label radGroupWidgetOptions">Toggle Widget 1</label>
    </li>
    <li>
        <input
            ng-click="widget_manage_customer = !widget_manage_customer"
            type="checkbox" 
            name="w_manage_customers"
            id="w_manage_customers" 
            class="css-checkbox"
            checked />

        <label for="w_manage_customers" class="css-label radGroupWidgetOptions">Toggle Widget 2</label>
    </li>
  </ul>

  <div ng-show="widget_manage_quotes" class="manage_content dash_widget reveal-anim   ation">
    <div class="widget_box box1">
      <h1>Widget 1!</h1>
    </div>
  </div>

  <div ng-show="widget_manage_customer" class="manage_content dash_widget reveal-animation">
    <div class="widget_box box2">
      <h1>Widget 2!</h1>
    </div>
  </div>

.reveal-animation.ng-hide.ng-hide-add-active {
    display: block !important;
}
.reveal-animation.ng-hide-remove {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}