Как вы можете уменьшить или уменьшить элемент, используя ng-if в angularjs?

Question

У меня есть следующий компонент.

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

Этот идентификатор игрока является динамическим. Когда он не существует, я хочу, чтобы этот элемент скользил. Когда это произойдет - я хочу, чтобы это SlideDown Как мне этого добиться?

Answer 1

Вы можете ввести модуль ngAnimate и воспользоваться некоторыми классами CSS, которые применяются при изменении DOM.

Для ng-if вам нужно посмотреть на .ng-enter и .ng-leave в частности.

Ниже приведен пример для демонстрации.

Не забудьте ознакомиться с официальной документацией по анимации .

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

», });

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>