Question

我正在尝试使用ngAnimate折叠进/出框。我做了类似的事情并且它有效，但我如何摆脱高度属性？拳击可以用来扩展（文本中的文字），但随后文字会出现在边缘。

.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>

Answer 1

请参阅此代码

<!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>

Answer 2

this question中的许多方法也回答了这一问题。没有简单的方法可以让这个动画每次完美地运行，而不使用javascript来测量内部内容的高度或使用css scale（参见链接）。

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

使用max-height而不是height来获取数据周围更紧密的框的基本示例：

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

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

Answer 3

我将使用http://augus.github.io/ngAnimate/这是没有辛勤工作的动画的好包。要使用它，您只需要包含css并为动画div添加类。即

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

Answer 4

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

＆＃13;

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;
  };
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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;
}

尝试并探索。快乐的编码：）

具有崩溃效果的ngAnimate

5 个答案: