Winkel Animation in einem div auf einen Klick

Question

Ich habe ein div, in dem ich einige Daten zeigen:

div.movie_details 
    div.movie_details_container 
     span {{ movieDetail.title }} 
     span {{ movieDetail.overview }} 

Ich habe auch eine Schaltfläche, die die Informationen ändert, die angezeigt worden ist:

ng-click="toggleRow(movie) 

Die toggleRow Funktion:

$scope.toggleRow = function(movie){ 

    $scope.movieDetail = movie; 
}; 

Also, wenn ein Benutzer klickt auf die Schaltfläche die toggleRow Funktion ausgelöst und sendet das Film-Objekt als Parameter für die Funktion. Die Funktion ändert dann den Bereich, der die in der Ansicht angezeigten Informationen ändert. Funktioniert gut.

Mein Problem ist, dass ich eine Transitionsanimation machen möchte, wenn sich die Information in div.movie_details_container ändert. Aber ich kann die richtige Reihenfolge der Aktionen nicht erkennen.

Ich machte eine Plunkr mit einer vereinfachten Version des Projekts: https://plnkr.co/edit/wlmVaxVhax0b07cvXXld?p=preview So, wenn der Benutzer auf einen Titel klickt, ist die Änderung sehr abrupt. Ich hätte gerne einen schönen Ein-/Ausstieg.

Answer 1

Sie können einfach CSS Animationen verwenden, um zu tun, was Sie wollen. Angular fügt die ng-hide Klasse den mit ng-show oder ng-hide versteckten div hinzu, und Sie können davon profitieren. Hier ist eine einfache und sehr minimalistisch Demo:

CSS:

.group { 
    border: 1px solid green; 
    margin-bottom: 5px; 
    padding: 5px; 
} 

.detail { 
    border: 1px solid black; 
    padding: 5px; 
    animation: 0.5s fadeInAnimation ease; 
} 

.detail.ng-hide { 
    height: 0; 
    opacity: 0; 
} 

@keyframes fadeInAnimation { 
    0% { 
    height: 0; 
    opacity: 0; 
    display: none; 
    } 

    100% { 
    height: auto; 
    opacity: 1; 
    display: block; 
    } 
} 

Plunker demo

Answer 2

Sie ngAnimate dafür verwenden können:

1. Fügen Sie angular-animate.js in der Datei:

   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
   

angular-animate.js sollte unter angular.min.js sein.

2. Legen Sie das Modul in Ihrer Anwendung, indem sie es als abhängiger Modul hinzufügen:

   angular.module('app', ['ngAnimate']); 
   

3. hinzufügen Styling:

   .detail{ 
       border: 1px solid black; 
       padding: 5px; 
       transition: all linear 0.5s; 
   } 
   .detail.ng-hide { 
       opacity: 0; 
   } 
   

Und es funktioniert: https://plnkr.co/edit/qrS8EBg8jitcqBqT3TqW?p=preview

Lesen Sie mehr über ngAnimate: https://docs.angularjs.org/api/ngAnimate