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

How to animate a directive in angular js

本文关键字：指令 设置 动画 js      更新时间：2023-09-26

正如你从这个 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添加到脚本标签中的html中，但这没有任何作用。我见过人们在他们的指令中使用"link："，但我还没有看到一个明确的例子，我可以将其实现到我的指令中。我的挑战是我想通过角度而不是 css 来做到这一点。

我真的很感激你的帮助！

无需触摸您的 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);
}
相关文章：