ng动画与崩溃效果

我想使用ngAnimate来折叠进/出框。我做了这样的事情，它的工作原理，但我如何摆脱高度属性？拳击可以用来扩展（文本），但是文本会在边缘出现。ng动画与崩溃效果

.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/这是很好的包装动画机智努力工作。为了使用它，你只需要包含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

基础上什么我都懂的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; 
}

尝试它和探索。快乐编码:)

来源

2016-07-08 08:06:08 claudios

ng动画与崩溃效果

回答

相关问题