ngAnimate CSS 动画不适用于 ng-show 和 ng-hide

Posted

技术标签:

【中文标题】ngAnimate CSS 动画不适用于 ng-show 和 ng-hide【英文标题】:ngAnimate CSS animation not working with ng-show & ng-hide 【发布时间】:2014-12-30 11:43:14 【问题描述】:

演示:http://plnkr.co/edit/cPDUWO?p=preview

我在页面上显示了 2 个选中的复选框和 2 个小部件。单击复选框将使用ng-showng-hide 隐藏和显示相应的小部件。现在我还想拥有一个基本的fadeInfadeOut,但是到目前为止还没有运气:( 显示/隐藏而没有任何淡入淡出动画的小部件。你能看出我哪里出错了吗?

控制器

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

CSS

.reveal-animation.ng-enter 
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */


.reveal-animation.ng-leave 
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */


@-webkit-keyframes enter_sequence 
    0%  opacity:0; 
    100%  opacity:1; 


@keyframes enter_sequence 
    0%  opacity:0; 
    100%  opacity:1; 


@-webkit-keyframes leave_sequence 
    0%  opacity:1; 
    100%  opacity:0; 


@keyframes leave_sequence 
    0%  opacity:1; 
    100%  opacity:0; 

html

<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>

【问题讨论】:

【参考方案1】:

看起来正确的样式应该包括.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 在动画期间立即隐藏元素。

演示:http://plnkr.co/edit/HsyRYLTwcsvP9pok8BV6?p=preview

【讨论】:

以上是关于ngAnimate CSS 动画不适用于 ng-show 和 ng-hide的主要内容,如果未能解决你的问题,请参考以下文章

ngAnimate 在 AngularJS 1.6.4 中停止工作

angularjs动画-ngAnimate--快速上手使用

为啥 css 动画不适用于背景大小 100%

AngularJS 动画

ngAnimate,addClass 回调在动画结束后不运行

CSS 打字动画不适用于 Firefox