ngAnimate with collapse effect

ngAnimateを使用して入力/出力ボックスを折りたたんでいます。私はそれのような何かをし、それは動作しますが、どのように高さのプロパティを取り除くのですか？ボクシングは、（それのテキスト）を拡張するために使用することができますが、その後、テキストがエッジ上に出てくるだろう。ngAnimate with collapse effect

.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について理解何のベースは、あなたは下のこのような何かを探しています。私のコードを試してください、これは滑らかに動作するはずです。

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

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はそれを試してみて探ります。ハッピーコーディング:)

出典

2016-07-08 08:06:08 claudios

答えて

関連する問題