angularjs - 如何在 angularjs 中使用 ng-if 向下滑动和向上滑动元素？

Question

我有以下组件。

<my-section
    ng-if="$ctrl.playerId"></my-section>

这个 playerId 是动态的。当它不存在时，我希望这个元素向上滑动。当它出现时 - 我希望它向下滑动。我怎样才能做到这一点？

Answer 1

您可以引入 ngAnimate 模块并利用某些在 DOM 更改时应用的 CSS 类。

对于 ng-if，您需要特别查看 .ng-enter 和 .ng-leave。

下面是一个演示的例子。

别忘了查看 official documentation on animations .

angular
  .module('app', ['ngAnimate'])
  .controller('ctrl', function ($scope) {
    $scope.playerId = false;
  })
  .component('mySection', {
    template: '<pre>...</pre>',
  });

my-section {
  background: silver;
  display: block;
  height: 100px;
}
my-section.ng-enter,
my-section.ng-leave {
  transition: all ease-out .3s;
}
my-section.ng-enter,
my-section.ng-leave.ng-leave-active {
  height: 0;
}
my-section.ng-leave,
my-section.ng-enter.ng-enter-active {
  height: 100px;
}

<div ng-app="app" ng-controller="ctrl as $ctrl">
  <input type="checkbox" ng-model="$ctrl.playerId">
  <my-section ng-if="$ctrl.playerId"><my-section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.min.js"></script>