Question

我目前使用ng-enter，ng-leave为我的ng-repeats动画，但对于ng-show / hide怎么样？是否也有课程？

Answer 1

ng-hide和ng-show的等效类是.ng-hide-add和.ng-hide-remove。此外，您可以使用.ng-hide-add-active和.ng-hide-remove-active来设置样式，并根据需要单独控制这些状态。

根据Angularjs ngHide和ngShow的文档，您可以在处于活动状态时使用相同的类来设置动画，以使用它的相应事件（添加或删除）生成动画。

以下示例使用此功能实现了一个简单的fade-in fade-out按钮。

观察确保在索引页面中包含angular-animate.js，并添加ngAnimate模块作为主模块的依赖关系（如果它是指令，则为子模块）一个孤立的模块，lib等），如：angular.module('myApp', ['ngAnimate']);

＆＃13;

angular.module('myApp', ['ngAnimate'])
  .controller('myController', function ($scope, $interval) {
    $scope.show = true;
    $interval(function () { $scope.show = !$scope.show; }, 1000);
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);  
});

＆＃13;

.my-element.ng-hide{
  opacity: 0;
}

.my-element.ng-hide-add,
.my-element.ng-hide-remove {
    /* 
    setup animations 
    mess up with the properties, etc
    */
    
    transition: all linear 1s;
}

.my-element.ng-hide-add-active,
.my-element.ng-hide-remove-active {
    /* set state during transitions */
    display: inline-block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.4.3/angular-animate.min.js"></script>
<div ng-controller="myController"><pre>show: {{ show }}</pre>
  <button class="my-element" ng-show="show">show</button>
</div>

＆＃13;

你能用角度1.4.8为ng-show / ng-hide设置动画吗？

1 个答案: