我写的这个Plunker包含一个简单的JS动画，通过jQuery.css / jQuery.animate完成。
简短的介绍：
我需要能够将更改的宽度/高度作为参数传递给动画addClass函数。该addClass确定指标如下所示：
addClass(element, className, doneCallback)
因此，我将自定义值添加到了元素的原型中。例如LoC 53
Object.getPrototypeOf(element).custom_bs_width = newVal[attrs.id].width;
并在addClass函数中对其进行动画处理。地点65+
myApp.animation('.updateRectangles', function() {
return {
addClass : function(element, className, done) {
jQuery(element).animate({
width: Object.getPrototypeOf(element).custom_bs_width,
这是正确的方法吗？如果没有，则存在将参数传递给JS动画的替代方法。我将CSS动画和CSS关键帧动画排除在外，因为恕我直言，无法传递参数。同意？
正如您所怀疑的那样，“将参数传递给addClass”确实是一种扭曲。
角动画围绕CSS类构建（因此为addClass / removeClass），因此可以与CSS3 Transitions一起很好地工作。该系统可以正常工作，以便ng-repeat中的DOM元素自动设置CSS类以在添加，移动或删除项目时触发动画。这与“自定义”动画无关，就像我认为这是您的意图。
一种选择是使用纯CSS3过渡（与CSS动画不同），并使用通过ng-style的标准Angular数据绑定简单地修改元素的大小/位置/颜色。如果在CSS中正确设置了CSS转换，它将自动启动。我创建了一个简单的方法（computeCSS），将“项目的数据”“转换”为ng样式友好的结构。这是代码（还有使颜色平滑变淡的奖励）。
http://plnkr.co/edit/oMOUiV5Sk6YusPpOqUQz?p=preview
添加了600ms的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, height 0.6s, left 0.6s, top 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, top: 10, height: 10, color:'#F3D698'},
{width: 10, left: 160, top: 10, height: 10, 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);
})
}
}
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句