ngAnimate with collapse effect

Question

I am trying to use ngAnimate to collapse in / out boxes. I did something like that and it works, but how do I get rid of the height property? Boxing can be used to extend (the text in it), but then the text will be coming out over the edge.

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

score 2 · Answer 1 · answered Jul 05 '16 at 12:25

Please Refer This Code

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

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge. — abarisone, Jul 08 '16 at 09:18

score 1 · Answer 2 · edited May 23 '17 at 12:14

This has also been answered with many approaches in this question. There is no easy way to make this animation work perfectly every time without using javascript to measure the height of the inner contents or using a css scale (see the link).

Also, to ensure that the text is hidden when the container is collapsed, be sure to use overflow: hidden; in the class

A basic example using max-height rather than height to getter a tighter box around the data:

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

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

score 1 · Answer 3 · answered Jul 07 '16 at 20:11

I will use http://augus.github.io/ngAnimate/ It's the good package for animation without hard work. For using that you need just include css and add class for animated div. Ie.

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

score 1 · Answer 4 · answered Jul 08 '16 at 03:24

Is this what you expected? I don't have the height in here and the animation works just fine.

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>

score 1 · Answer 5 · answered Jul 08 '16 at 08:06

Base on what I understand about the OP, you are looking for something like this below. Try my code and this should works smooth.

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

Try it and explore. Happy coding :)

ngAnimate with collapse effect

5 Answers5