ngAnimate mit Kollaps-Effekt

Ich versuche mit ngAnimate ein-/auszublenden. Ich habe so etwas gemacht und es funktioniert, aber wie kann ich die Höhe-Eigenschaft loswerden? Boxen kann verwendet werden, um zu erweitern (der Text darin), aber dann wird der Text über die Kante kommen.ngAnimate mit Kollaps-Effekt

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

Quelle

2016-06-28 Jake

Dies wurde auch mit vielen Ansätzen in this question beantwortet. Es gibt keinen einfachen Weg, um diese Animation jedes Mal perfekt zu machen, ohne Javascript zu verwenden, um die Höhe des inneren Inhalts zu messen oder einen css scale zu benutzen (sehen Sie den Link).

Auch, um sicherzustellen, dass der Text verborgen ist, wenn der Behälter zusammengedrückt wird, sollen Sie overflow: hidden; in der Klasse

Ein einfaches Beispiel mit max-height zu verwenden, anstatt Höhe um die Daten, die eine engere Feld Getter:

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

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

Quelle

2016-07-01 17:43:43

Bitte siehe diesen 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>

Quelle

2016-07-05 12:25:09

Bitte bearbeiten Sie mit mehr Informationen. Code-only und "try this" Antworten werden abgeraten, da sie keine durchsuchbaren Inhalte enthalten und nicht erklären, warum jemand "das versuchen sollte". Wir bemühen uns, eine Ressource für Wissen zu sein. – abarisone

ich http://augus.github.io/ngAnimate/ verwenden Es ist das gute Paket für Animation wit hout harte Arbeit. Um das zu verwenden, müssen Sie nur CSS hinzufügen und Klasse für animierte Div hinzufügen. Ie.

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

Quelle

2016-07-07 20:11:29 Darex1991

Haben Sie das erwartet? Ich habe nicht die Höhe hier und die Animation funktioniert gut.

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>

Quelle

2016-07-08 03:24:13 Srijith

Base auf, was ich über das OP verstehen, suchen Sie unten so etwas wie. Probieren Sie meinen Code und das sollte reibungslos funktionieren.

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

es versuchen und erforschen. Happy coding :)

Quelle

2016-07-08 08:06:08 claudios

ngAnimate mit Kollaps-Effekt

Antwort

Verwandte Themen