如何在angular js中对指令进行动画处理

Question

As you can see from this plunker I have a simple project viewer. 正如你可以从这个看plunker我有一个简单的项目观众。

HTML: 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. 我尝试将jquery添加到script标签中的html中，但没有执行任何操作。 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. 我已经看到人们在他们的指令中使用“ link：”，但是我还没有看到一个清晰的示例可以在其中实现它。 My challenge is that I want to do this through angular, not css. 我的挑战是我想通过有角度的方法，而不是通过CSS来做到这一点。

I really appreciate the help! 我非常感谢您的帮助！

Answer 1

No need to touch your js, do it in your css like this: 无需触摸您的js，在您的CSS中执行以下操作：

.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 好吧，因为你真的想与angularjs 对此我真的不建议只是为了执行这一要求 ，只是为了演示的目的和“教育”的宗旨做到这一点，你可以做这样的演示采用ng-mouseover ， ng-mouseleave和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: 然后在您的CSS中：

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

}

如何在angular js中对指令进行动画处理

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-02-11 03:21:44

如何在angular js中对指令进行动画处理

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-02-11 03:21:44

解决方案1
2 已采纳 2016-02-11 03:21:44