javascript - 如何使用 Angular 和 ngAnimate 平滑地显示带有背景和文本的 block ？

Question

我是 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>

Answer 1

您可以为您的 div 指定一个类并使用 ng-hide transitions 来控制动画。

这是一个简单的演示:

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>