AngularJS - animate div using changing scope variable

Question

I'm new to angular. I want to animate a div body using ng-click on a ng-repeat element. This is what I have tried so far.

app.js

var app = angular.module( 'app', [] );

app.controller('appController', function($scope) {

    $scope.items = [
  {"id": "id1", "name": "Name 1"},
  {"id": "id2", "name": "Name 2"},
  {"id": "id3", "name": "Name 3"}
  ];

  $scope.selectedStyle = {"background-color": "blue", "color": "white"};
  $scope.selectedItem = $scope.items[0];

  $scope.selectItem = function(item) {
    $scope.selectedItem = item;
  }

});

app.html

<div ng-app="app" ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" ng-style="item.id === selectedItem.id && selectedStyle">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body">
    {{selectedItem.name}}
  </div>
</div>

What I wanted to do is add a fade-in transition effect to item-body div as the changing item. I searched the web, but I can't seem to find a solution. Please help.

JSFiddle - https://jsfiddle.net/lpsandaruwan/ot45qdno/14/

By using jquery, $scope.selectedItem.change(function() { fadeIn() }) ? — Donald Wu
– Donald Wu, Commented Dec 5, 2016 at 8:53

Thatkookooguy · Accepted Answer · 2016-12-05 11:09:44Z

Animating the items themselves

You can do this by adding a class to the selected element using angular, and managing the transition using css transitions.

This way, there's no need for $scope.selectedStyle. We'll manage that in css.

So, the flow would be like so:

When a user clicks, angular will add a selected class to the clicked element.
css transition for the class item will handle the color changes for you (both for select and deselect).

Here's the code:

var app = angular.module('app', []);

app.controller('appController', function($scope) {

  $scope.items = [{
    "id": "id1",
    "name": "Name 1"
  }, {
    "id": "id2",
    "name": "Name 2"
  }, {
    "id": "id3",
    "name": "Name 3"
  }];

  $scope.selectedItem = $scope.items[0];

  $scope.selectItem = function(item) {
    $scope.selectedItem = item;
  }

});

.item-body {
  color: red;
}
.item {
  cursor: pointer;
  transition: all 250ms linear;
}
.item.selected {
  cursor: default;
  background-color: blue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" class="item" ng-class="{ 'selected': selectedItem === item }">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body">
    {{selectedItem.name}}
  </div>
</div>

Animating the `item-body`

if you want to animate the item-body on change, you can use a simple timeout to add and remove a class.

Also, you should know that there are some modules that you can use to achieve this (like this).

Here is what I suggest:

add a flag to let the item-body element know it needs to hide and show
hook that flag to a class
make that flag hide and show the element, similar to the transition we did before

var app = angular.module('app', []);

app.controller('appController', function($scope, $timeout) {

  $scope.items = [{
    "id": "id1",
    "name": "Name 1"
  }, {
    "id": "id2",
    "name": "Name 2"
  }, {
    "id": "id3",
    "name": "Name 3"
  }];

  $scope.selectedItem = $scope.items[0];

  $scope.selectItem = function(item) {
    $scope.changeIsOn = true;
    $timeout(function() {
      $scope.selectedItem = item;
      $scope.changeIsOn = false;
    }, 250);

  }

});

.item-body {
  color: red;
  transition: opacity 250ms linear;
}
.item-body.changing {
  opacity: 0;
}
.item {
  cursor: pointer;
  transition: all 250ms linear;
}
.item.selected {
  cursor: default;
  background-color: blue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" class="item" ng-class="{ 'selected': selectedItem === item }">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body" ng-class="{ 'changing': changeIsOn }">
    {{selectedItem.name}}
  </div>
</div>

Many thanks. This is useful. But my question was based on animating the "item-body" according to the selected item. :-)
Selecting this one as the answer, because it is well explained and neat. :-)

Frazer Wilson · Accepted Answer · 2016-12-05 09:22:20Z

1

Using ng-class, you could apply the animation class selectively based on the scope value, eg:

$scope.selectedStyle = false;

<tr ng-class="({'myClass':selectedStyle})" >

answered Dec 5, 2016 at 9:22

Frazer Wilson

1611 gold badge1 silver badge13 bronze badges

Comments

bhanu.cs · Accepted Answer · 2016-12-05 10:14:17Z

1

You can create a custom directive that watches a assigned model to your item-body div and when value is changed you can use animate service of angular.

In your html view change notice that I have added my custom directive

<div ng-app="app"  ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" ng-style="item.id === selectedItem.id && selectedStyle">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body" my-dir ng-model="myValue">
    {{selectedItem.name}}
  </div>
</div>

Remember to download angular-animate.js and add it to your solution.Important part to inject a 'ngAnimate' dependency in your module and add your custom directive as follows.

Before doing this add a class style

 .myClass
    {
         background-color: red;
          transition: all 1s;
          -webkit-transition: all 1s ease-in-out;
    }

Notice that I am applying $watch method to monitor variable

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

        app.controller('appController', function ($scope) {

                        $scope.items = [
              { "id": "id1", "name": "Name 1" },
              { "id": "id2", "name": "Name 2" },
              { "id": "id3", "name": "Name 3" }
              ];

            $scope.selectedStyle = { "background-color": "blue", "color": "white" };
            $scope.selectedItem = $scope.items[0];

            $scope.selectItem = function (item) {
                $scope.selectedItem = item;
                $scope.myValue = item.name;

            }

        }).directive("myDir", function ($animate, $timeout) {
            return function (scope, element, attrs) {
                scope.$watch('myValue', function (newValue, oldValue) {

                    if (newValue != oldValue) {

                        $animate.addClass(element, "myClass").then(function () {
                            $timeout(function () { $animate.removeClass(element, "myClass"); });
                        });
                    }

                },true);
            }
        });

answered Dec 5, 2016 at 10:14

bhanu.cs

1,3751 gold badge11 silver badges25 bronze badges

3 Comments

bhanu.cs Over a year ago

For working demo refer this fiddle jsfiddle.net/bhanucs/hgbwng2x/3

lpsandaruwan Over a year ago

Thanks. This is what I've been looking for. :-)

bhanu.cs Over a year ago

Good to hear that it helped u :)

Collectives™ on Stack Overflow

AngularJS - animate div using changing scope variable

3 Answers 3

Animating the items themselves

So, the flow would be like so:

Here's the code:

Animating the `item-body`

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Animating the items themselves

So, the flow would be like so:

Here's the code:

Animating the item-body

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Animating the `item-body`