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

Question

正如你可以从这个看plunker我有一个简单的项目观众。

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>

角度：

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',
  };
});

我的目标是当我将鼠标悬停在项目上时使它们动起来（更具体地讲，增加大小）。 我尝试将jquery添加到script标签中的html中，但没有执行任何操作。 我已经看到人们在他们的指令中使用“ link：”，但是我还没有看到一个清晰的示例可以在其中实现它。 我的挑战是我想通过有角度的方法，而不是通过CSS来做到这一点。

我非常感谢您的帮助！

Answer 1

无需触摸您的js，在您的CSS中执行以下操作：

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

}

这是演示

好吧，因为你真的想与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>

然后在您的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