angularjs – 将参数传递给Angular中的JS Animation

我写了这个包含一个简单JS动画的 this Plunker,通过jQuery.css / jQuery.animate完成.

简短的介绍：

> 3显示了矩形
>按钮“随机化”随机化宽度/高度
矩形
>这个widht / height的变化应该是动画的

我需要能够将更改的宽度/高度作为参数传递给动画addClass函数. addClass定义如下所示：

addClass(element,className,doneCallback)

所以我将自定义值添加到元素的原型中.例如,LoC 53

Object.getPrototypeOf(element).custom_bs_width = newVal[attrs.id].width;

并在addClass函数中访问它们以进行动画处理. LoC 65

myApp.animation('.updateRectangles',function() {
return {
    addClass : function(element,done) {
      jQuery(element).animate({
        width:  Object.getPrototypeOf(element).custom_bs_width,

这是正确的方法吗？如果没有,那么将参数传递给JS Animation会有什么替代方法.
我将CSS动画和CSS关键帧动画排除为imho,无法传递参数.同意？

解决方法

正如您所怀疑的那样,“将参数传递给addClass”是一个非常扭曲的黑客攻击.

角度动画是围绕CSS类构建的(因此是addClass / removeClass),因此适用于CSS3 Transitions.该系统旨在使ng-repeat中的DOM元素自动设置CSS类,以在添加,移动或移除项目时触发动画.这与“自定义”动画无关,我认为这是你的意图.

一种选择是使用普通的CSS3过渡(与CSS动画不同),并使用标准的Angular数据绑定通过ng-style修改元素的大小/位置/颜色.如果在CSS中正确设置,CSS Transitions将自动启动.我创建了一个简单的方法(computeCSS),将“项目数据”“转换”为ng-style-friendly结构.这是代码(有一个奖金可以平滑地淡化颜色).

http://plnkr.co/edit/oMOUiV5Sk6YusPpOqUQz?p=preview

添加了600毫秒的CSS3过渡：

<style>
  .my-rectangles {
    position:absolute;
   -webkit-transition: width 0.6s,height 0.6s,left 0.6s,top 0.6s,background-color 0.6s;
   transition: width 0.6s,background-color 0.6s;
  }
</style>

这是代码：

var myApp = angular.module("MyApp",["ngAnimate"]);

myApp.controller('MainCtrl',function($scope) {
  //nothing to declare
});

//general directive for the rectangles
myApp.directive('rectangles',function() {
  return{
    restrict: 'E',template: '<div style="position:relative; width: 200px; height: 200px; background-color: #646464">' +
                  '<div ng-repeat="item in items" id="{{$index}}" class="my-rectangles" ng-style="computeCSS(item)"></div>' +
              '</div>',controller: function($scope) {

      $scope.computeCSS = function(item) {
        return { 
          width: item.width+"px",left: item.left+"px",top: item.top+"px",height: item.height+"px",'background-color':item.color
        };
      }

      $scope.items = [
        {width: 10,left: 10,top: 10,height: 10,color:'#4C8B71'},{width: 10,left: 80,color:'#F3D698'},left: 160,color:'#D25F45'}
      ];

      $scope.randomize = function() {
        $scope.items.forEach(function(item) {
          item.width = Math.random() * (40 - 10) + 10;
          item.height = item.width;
          item.color = "#" + (Math.round(Math.random()*0xFFFFFF)).toString(16);
        })
      }
    }
  }    
});