CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
user5812721
user5812721

Reputation: 293

How to animate a directive in angular js

As you can see from this plunker I have a simple project viewer.

HTML:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="angular.min.js"></script>
    <script src="angular-animate.min.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-controller="ProjectsController">
    <h1>Hello Plunker!</h1>
    <p>{{ name }}</p>

    <div class="slider">
    <div class="project" ng-repeat="project in projects">
                        <projects-info info="project"></projects-info>
        </div>  
    </div>

    <script src="script.js"></script>
  </body>
</html>

Angular:

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

app.controller('ProjectsController', ['$scope', function($scope) {
    $scope.name = 'hello world';
    $scope.projects = [
    {
        link: '#',
        img: 'http://www.gravatar.com/avatar/{{hash}}',
        description: 'Project 1'
      },
    {
      link: '#',
      img: 'http://www.gravatar.com/avatar/{{hash}}',
      description: 'Project 2'
    },
    {
      link: '#',
      img: 'http://www.gravatar.com/avatar/{{hash}}',
      description: 'Project 3'
    },
    {
      link: '#',
      img: 'http://www.gravatar.com/avatar/{{hash}}',
      description: 'Project 4'
    },
    {
      link: '#',
      img: 'http://www.gravatar.com/avatar/{{hash}}',
      description: 'Project 5'
    }];

  $scope.numOfProjects = 8;


}]);

app.directive('projectsInfo', function() {
  return {
    restrict: 'E',
    scope: {
        info: '='
    },
    templateUrl: 'projectsInfo.html',
  };
});

My objective is to make the projects animate (more specifically, grow in size) when I hover over them. I've tried adding jquery to the html in a script tag but that didn't do anything. I've seen people use the 'link:' in their directive but I haven't seen a clear example where I can implement it to mine. My challenge is that I want to do this through angular, not css.

I really appreciate the help!

Upvotes: 0

Views: 60

Answers (1)

Louie Almeda
Louie Almeda

Reputation: 5632

No need to touch your js, do it in your css like this:

.project {
    transition:  0.2s;
}
.project:hover {
    transform: scale(1.2,1.2);

}

Here's the demo

Ok, because you really want to do it with angularjs Which I don't really recommend just to execute for this requirement and just for the sake of demonstration and 'educational' purposes you may do it like this demo using ng-mouseover, ng-mouseleave and ng-class

<div ng-mouseover='project.isHovered = true' ng-mouseleave='project.isHovered = false' ng-class='{hovered: project.isHovered}' class="project" ng-repeat="project in projects">
        <projects-info info="project"></projects-info>
</div>

then in your css:

.project {
    transition:  0.2s;
}
.project.isHovered {
    transform: scale(1.2,1.2);

}

Upvotes: 2

Related Questions