Angular JS飞行购物车动画指令
Angular JS Flying Shopping Cart Animation Directive
目前我正在尝试创建一个Angular Directive,为"飞行购物车"设置动画。
我已经找到了很多jQuery的解决方案,但没有一个是在纯角度指令中完成的。我想实现的jQuery飞行车演示在这里。。。
原始jQuery飞行车代码笔:
http://codepen.io/ElmahdiMahmoud/pen/tEeDn
我对角度指令没有那么丰富的经验,不知道如何做到这一点。我已经开始了自己的Codepen,希望能弄清楚它,但我无法理解需要发生什么以及如何发生。
我当前的Codepen:
http://codepen.io/anon/pen/emKoov?editors=101
var myApp = angular.module('flyingCartApp', []);
myApp.directive('addToCartButton', function() {
function link(scope, element, attributes) {
element.on('click', function(){
console.log('i was clicked');
console.log('Image source', attributes.src)
console.log('Target element', $(attributes.target))
});
};
return {
restrict: 'E',
link: link,
transclude: true,
replace: true,
scope: {},
template: '<button class="add-to-cart" ng-transclude></button>'
};
});
以下是解决方案代码笔链接
js:
var myApp = angular.module('flyingCartApp', []);
myApp.directive('addToCartButton', function() {
function link(scope, element, attributes) {
element.on('click', function(event){
var cartElem = angular.element(document.getElementsByClassName("shopping-cart"));
console.log(cartElem);
var offsetTopCart = cartElem.prop('offsetTop');
var offsetLeftCart = cartElem.prop('offsetLeft');
var widthCart = cartElem.prop('offsetWidth');
var heightCart = cartElem.prop('offsetHeight');
var imgElem = angular.element(event.target.parentNode.parentNode.childNodes[1]);
var parentElem = angular.element(event.target.parentNode.parentNode);
var offsetLeft = imgElem.prop("offsetLeft");
var offsetTop = imgElem.prop("offsetTop");
var imgSrc = imgElem.prop("currentSrc");
console.log(offsetLeft + ' ' + offsetTop + ' ' + imgSrc);
var imgClone = angular.element('<img src="' + imgSrc + '"/>');
imgClone.css({
'height': '150px',
'position': 'absolute',
'top': offsetTop + 'px',
'left': offsetLeft + 'px',
'opacity': 0.5
});
imgClone.addClass('itemaddedanimate');
parentElem.append(imgClone);
setTimeout(function () {
imgClone.css({
'height': '75px',
'top': (offsetTopCart+heightCart/2)+'px',
'left': (offsetLeftCart+widthCart/2)+'px',
'opacity': 0.5
});
}, 500);
setTimeout(function () {
imgClone.css({
'height': 0,
'opacity': 0.5
});
cartElem.addClass('shakeit');
}, 1000);
setTimeout(function () {
cartElem.removeClass('shakeit');
imgClone.remove();
}, 1500);
});
};
return {
restrict: 'E',
link: link,
transclude: true,
replace: true,
scope: {},
template: '<button class="add-to-cart" ng-transclude></button>'
};
});
css:
.shakeit {
-webkit-animation-name: thumb;
-webkit-animation-duration: 200ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear;
}
.itemaddedanimate {
-webkit-transition: all ease-in-out 0.5s;
}
@-webkit-keyframes thumb {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(0.8); }
100% { -webkit-transform: scale(1); }
}
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- AngularJS指令中的动画,事件未启动
- Angular JS飞行购物车动画指令
- ng如果初始动画不使用自定义指令
- 无法使用ngShow为自定义指令制作动画
- 如何在角度 js 中为指令设置动画
- 删除对象时执行元素指令动画的角度方式
- 是否可以在 Angular 指令中使用 jQuery 来执行动画
- AngularJS自定义动画指令
- jQuery动画代码只运行第一条指令
- AngularJS,更改动画:未调用指令$watch