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動畫與崩潰效果

回答

相關問題