CODEWITHSUNDEEP
angularjs
Peter Boomsma
Peter Boomsma

Reputation: 9808

angular animation in a div on a click

I have an div in which I show some data: 

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

I also have a button that changes the information that's been displayed:

ng-click="toggleRow(movie)

The toggleRow function:

$scope.toggleRow = function(movie){

    $scope.movieDetail = movie;
};

So when a user clicks on the button the toggleRow function fires and sends the movie object as a parameter to the function. The function then changes the scope which changes the information displayed in the view. Works fine.

My problem is that I want to make a transition animation when the information in the div.movie_details_container changes. But I can't figure the correct order of actions.

I made a plunkr with a simplified version of the project: https://plnkr.co/edit/wlmVaxVhax0b07cvXXld?p=preview So when the user clicks on a title the change is very abrupt. I would like a nice fade in/out transition.

Upvotes: 2

Views: 1922

Answers (2)

user5466293
user5466293

Reputation:

You can use ngAnimate for that:

  1. Include angular-animate.js in the file:

    <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 should be below angular.min.js.

  1. Load the module in your application by adding it as a dependent module:

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

  2. Add styling:

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

And it's working: https://plnkr.co/edit/qrS8EBg8jitcqBqT3TqW?p=preview

Reading more about ngAnimate: https://docs.angularjs.org/api/ngAnimate

Upvotes: 1

thepio
thepio

Reputation: 6253

You could just use css animations to do what you want. Angular adds the ng-hide class to the divs hidden with ng-show or ng-hide and you can take advantage of that. Here's a simple and very minimalistic 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

Upvotes: 1

Related Questions