ngAnimate с эффектом коллапса

Я пытаюсь использовать ngAnimate для обхода входов/выходов. Я сделал что-то подобное, и он работает, но как мне избавиться от свойства height? Бокс может использоваться для расширения (текст в нем), но затем текст будет выходить за край.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>

источник

2016-06-28 Jake

На это также были ответы многие подходы в 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; 
}

источник

2016-07-01 17:43:43

Пожалуйста, обратитесь этот код

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

источник

2016-07-05 12:25:09

Пожалуйста, отредактируйте с дополнительной информацией. Только код и «попробуйте» ответы не приветствуются, поскольку они не содержат содержимого, доступного для поиска, и не объясняют, почему кто-то должен «попробовать это». Мы прилагаем усилия, чтобы стать источником знаний. – abarisone

я буду использовать http://augus.github.io/ngAnimate/ Это хороший пакет для анимации остроумия hout тяжелая работа. Для использования этого вам нужно просто включить css и добавить класс для анимированного div. Т.е.

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

источник

2016-07-07 20:11:29 Darex1991

Это вы ожидали? У меня нет высоты здесь, и анимация работает просто отлично.

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>

источник

2016-07-08 03:24:13 Srijith

Основание на то, что я понимаю, о О.П., вы ищете что-то вроде этого ниже. Попробуйте мой код, и это должно работать гладко.

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

Попробуйте и исследовать. Счастливое кодирование :)

источник

2016-07-08 08:06:08 claudios

ngAnimate с эффектом коллапса

ответ

Смежные вопросы