Как плавно показать блок с фоном и текстом с помощью Angular и ngAnimate? - PullRequest
Новая
       23

Как плавно показать блок с фоном и текстом с помощью Angular и ngAnimate?

0 голосов
/ 02 ноября 2018

Я новичок в JS и Angular. Я пытаюсь сделать ng-show и ng-hide для моего фона и текста. Проблема в моем тексте: я могу скрыть его плавно, но когда он показывается, сначала я получаю весь текст, а потом - фон. Как я могу это исправить?

JS: 

var app = angular.module('myApp', ['ngAnimate']);

CSS: 

div {
    overflow: visible;
    transition: all linear 0.5s;
    background-color: lightblue;
    height: 100px;
}

.ng-hide {
    overflow: hidden;
    height: 0;
opacity: 0;
}

HTML: 

<input type="checkbox" ng-model="myCheck"/>

<div ng-show="myCheck">
    Many text here<br/>
    Many text here<br/>
    Many text here<br/>
    Many text here<br/>
    Many text here<br/>
    Many text here<br/>
</div>

1 Ответ

0 голосов
/ 02 ноября 2018

Вы можете указать класс для вашего div и использовать переходы ng-hide для управления анимацией.

Вот простая демонстрация: 

var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
  $scope.myCheck = false;
});
.myClass {
  overflow: visible;
  background-color: lightblue;
  height: auto;
  transition: all 0.5s ease-in-out;
  transform: translateY(0);
}

.myClass.ng-hide {
  transform: translateY(-100%);
}

.myClass.ng-hide-remove,
.myClass.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}

.myClass.ng-hide-add,
.myClass.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <input type="checkbox" ng-model="myCheck" />
  <span>{{myCheck?'Hide':'Show'}}</span>

  <div class="myClass" ng-show="myCheck">
    Many text here<br/> Many text here<br/> Many text here<br/> Many text here<br/> Many text here<br/> Many text here<br/>
  </div>

</div>
...