angular animation in a div on a click

Question

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.

That doesn't really matter much. With CSS I can do anything I want but I can't figure out how to set it up. But I would like the current info to fade out and then fade in the new info. — Peter Boomsma
– Peter Boomsma, Commented Aug 12, 2016 at 12:27

thepio · Accepted Answer · 2016-08-12 12:45:58Z

1

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

answered Aug 12, 2016 at 12:45

thepio

6,2635 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DamianoPantani Over a year ago

I would also add overflow-y: hidden; to .detail and height: 18px at 100% animation step (auto height makes it run stairway)

thepio Over a year ago

Yep you are right. This example was just to point out a way to do it in it's most simple format :)

Peter Boomsma Over a year ago

Maybe I didn't explain it well enough in my question, but I wanted to animate the transition between movie info when you click on the title. So you have a fade in/out on the X {"title":"Star Wars 1"} and X {"title":"Star Wars 2"} I managed fixing this using css transition delays.

thepio Over a year ago

Ok, well I'm glad you got it fixed anyways :)

user5466293 · Accepted Answer · 2016-08-12 12:48:44Z

1

You can use ngAnimate for that:

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.

Load the module in your application by adding it as a dependent module:
```
angular.module('app', ['ngAnimate']);
```

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

answered Aug 12, 2016 at 12:48

user5466293

1 Comment

Peter Boomsma Over a year ago

Maybe I didn't explain it well enough in my question, but I wanted to animate the transition between movie info when you click on the title. So you have a fade in/out on the X {"title":"Star Wars 1"} and X {"title":"Star Wars 2"} I managed fixing this using css transition delays.

Collectives™ on Stack Overflow

angular animation in a div on a click

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related