具有折叠效果的 ngAnimate答案

【问题标题】：ngAnimate with collapse effect具有折叠效果的 ngAnimate
【发布时间】：2016-10-31 06:15:11
【问题描述】：

我正在尝试使用 ngAnimate 折叠进/出框。我做了类似的事情并且它有效，但是我如何摆脱 height 属性？装箱可用于扩展（其中的文本），但随后文本将超出边缘。

.myTest {
  transition: all linear 0.5s;
  height: 400px; /* I want to get rid this */
}
.ng-hide {
  height: 0;
}



<div class="content myTest" ng-show="show">
      <div class="row">
        <div class="col-md-15">
          <div class="text1">{{text1}}</div>
          <div class="analytic">{{analytic}}</div>
          <div class="text2">{{text2}}</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-15">
          <div class="label">{{'label'|translate}}</div>
          <div class="text3">{{text3}}</div>
        </div>
      </div>
    </div>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

this question 中的许多方法也解决了这个问题。如果不使用 javascript 来测量内部内容的高度或使用 css scale（请参阅链接），没有简单的方法可以使此动画每次都完美运行。

另外，为确保容器折叠时文本是隐藏的，请务必在类中使用overflow: hidden;

使用最大高度而不是高度来围绕数据获得更紧密的框的基本示例：

.myTest {
  transition: all linear 0.5s;
  max-height: 400px; /* Set to something larger is expected */
  overflow: hidden;

}
.ng-hide {
  max-height: 0;
}

【讨论】：

【解决方案2】：

请参考此代码

<!DOCTYPE html>
<html>
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

<body ng-app="ngAnimate">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

【讨论】：

请编辑更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。

【解决方案3】：

我将使用http://augus.github.io/ngAnimate/ 这是一个很好的动画包，无需努力。要使用它，您只需要包含 css 并为动画 div 添加类。即。

li.animation.slide-down ng-repeat='item in vm.items | filter: vm.filters'

【讨论】：

【解决方案4】：

这是你所期望的吗？我这里没有高度，动画效果很好。

var demoApp = angular.module('demo-app', ['ngAnimate']);
demoApp.controller('DemoCtrl', function($scope) {
  $scope.text1 = 'Sometext1';
  $scope.analytic = 'This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.';
  $scope.text2 = 'Sometext2';
  $scope.text3 = 'Sometext3';
  $scope.show = true;

  $scope.toggleDiv = function() {
    $scope.show = !$scope.show;
  };
});

.myTest {
  border: 1px solid gray;
  margin: 10px;
  transition: all linear 0.5s;
}
.ng-hide {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>

<body ng-app="demo-app">
  <div ng-controller="DemoCtrl">
    <button ng-click="toggleDiv()">Toggle Div</button>
    <div class="content myTest" ng-show="show">
      <div class="row">
        <div class="col-md-15">
          <div class="text1">{{text1}}</div>
          <div class="analytic">{{analytic}}</div>
          <div class="text2">{{text2}}</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-15">
          <div class="label">{{'label'}}</div>
          <div class="text3">{{text3}}</div>
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

【解决方案5】：

根据我对 OP 的了解，您正在寻找如下内容。试试我的代码，这应该很顺利。

HTML

<body ng-app="ngAnimate">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck">Lorem ipsum dolor sit amet, pro no tamquam alienum, eloquentiam interpretaris eum cu. Nec ex simul tantas, ea qui conceptam expetendis. Alii dolore labores in sit, eius fierent luptatum an quo. Sit ut aliquam minimum reprimique. Tempor concludaturque sed an.

Posse definiebas id quo, eu elitr principes consulatu vim, no natum habeo tation per. Vim ne sumo abhorreant, vel ad equidem expetendis, in nobis meliore cum. Dolor ubique vis ex, ubique populo detraxit ad est, adolescens mnesarchum et vis. Stet tation necessitatibus qui ad, ex intellegam delicatissimi eum. Vix cu altera disputationi, vel nonumes quaestio at. In vel illud consequat.

Fierent perfecto efficiantur pro id, splendide definitiones vim ne, ius ut solum alterum platonem. Percipit accommodare nam id. An est altera albucius incorrupte. Exerci volumus scriptorem qui an, ocurreret mnesarchum te sit, qui meis constituto te.</div>

</body>

CSS

div {
  transition: all linear 0.5s;
  background-color: #3598dc;
  height: 100%;
  width: 100%;
  position: relative;
  padding: 10px;
  top: 0;
  left: 0;
  color: #ffffff;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

尝试并探索。快乐编码:)

【讨论】：