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

当我将鼠标悬停在项目上时，我的目标是使项目具有动画效果（更具体地说，增加大小）。我已经尝试在脚本标记中将hquery添加到html但是没有做任何事情。我见过人们使用的链接：＆＃39;在他们的指令中，我还没有看到一个明确的例子，我可以将它实施到我的。我的挑战是我想通过角度而不是css来做到这一点。

我真的很感激帮助！

Answer 1

无需触摸你的js，在你的css中这样做：

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

}

这是demo

好的，因为你真的想用angularjs 我真的不建议只执行这个要求，只是为了演示和'教育'的目的，你可以这样做像这样demo 使用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);

}

如何在角度js中为指令设置动画

1 个答案: