Question

我正试图通过ngshow使用nganimate来淡化和淡出div。但动画不会发生。我在这做错了什么？

HTML

<div ng-controller="AppCtrl">
    <button ng-click="showMailOn()">Opt1</button>
    <button ng-click="showMailOff()">Opt2</button>
    <div ng-animate="'email-profile-option'" ng-show="showMailContent()" >
        <span>Content1</span>
    </div>
    <div ng-animate="'email-profile-option'" ng-hide="showMailContent()" >
        <span>Content2</span>
    </div>
</div>

JS

var app = angular.module('plunker', ['ngAnimate']); 
app.controller('AppCtrl', function($scope) {

    var mailOpt = true;
    $scope.showMailOn = function() {
      mailOpt = true;
    }
    $scope.showMailOff = function() {
      mailOpt = false;
    }
    $scope.showMailContent = function() {
      return mailOpt;
    }
})

CSS

.email-profile-option.ng-enter, .email-profile-option.ng-leave {
         -webkit-transition:all linear 0.3s;
          -moz-transition:all linear 0.3s;
          -ms-transition:all linear 0.3s;
          -o-transition:all linear 0.3s;
          transition:all linear 0.3s;
      }

      .email-profile-option.ng-enter{}
      .email-profile-option.ng-enter-active{opacity: 1;}
      .email-profile-option.ng-leave{}
      .email-profile-option.ng-leave-active{opacity: 0;}

Plnkr：http://plnkr.co/edit/d9kpOYYVAovO7aj5HIZl?p=preview

Answer 1

指令ngshow使用ng-hide类：ng-hide-add，ng-hide-remove，活动类为ng-hide-add-active和ng-hide-remove-active。

此外，您应该使用html元素的class选择器：

<div  ng-hide="showMailContent()" >
        <span class="animation">Content2</span>
 </div>

在CSS：

animation.ng-hide-add{
/* Your exit animation here */
}
animation.ng-hide-remove{
/* your enter animation here */
}

请参阅ng-show页面以供参考。

ngenter和ngleave类似乎没有被添加

1 个答案: