javascript - Angular JS Flying Shopping Cart Animation Directive - Stack Overflow

admin管理员组

文章数量:1317909

Currently I'm trying to create an Angular Directive that animates a 'flying shopping cart'.

I have found plenty of solutions with jQuery but none done in a pure Angular Directive. The jQuery flying cart demo that I would like to implement is here...

Original jQuery Flying Cart Codepen:

I am not that experienced with Angular Directives to exactly know how to acplish this. I have started my own Codepen in hopes of figuring it out but I can't manage to wrap my head around what needs to happen and how.

My current Codepen:

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

Currently I'm trying to create an Angular Directive that animates a 'flying shopping cart'.

I have found plenty of solutions with jQuery but none done in a pure Angular Directive. The jQuery flying cart demo that I would like to implement is here...

Original jQuery Flying Cart Codepen:

http://codepen.io/ElmahdiMahmoud/pen/tEeDn

I am not that experienced with Angular Directives to exactly know how to acplish this. I have started my own Codepen in hopes of figuring it out but I can't manage to wrap my head around what needs to happen and how.

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

• javascript
• jquery
• html
• angularjs
• angularjs-directive

Share Improve this question Follow asked Mar 2, 2015 at 8:59 James LeBoeufJames LeBoeuf 8311 silver badge88 bronze badges 4

• Can you post how you would do it without any animation? – Michal Charemza Commented Mar 2, 2015 at 9:03
• Not sure I follow you Michal. The desired solution will be a aesthetic feel for users. It's to show that something happened after they clicked on a button. It doesn't do anything backend wise. I have a ng-click() function that handles all the backend work of actually adding the item to the database. – James LeBoeuf Commented Mar 2, 2015 at 9:15
• I don't mean the server side code. Presumably you would need to maintain some sort of array of client side model objects of thing that are in the basket, and some code telling the server side when things are added. I suspect it would limit the scope of the question, and also make answers more useful to you, if you show the behaviour you want in terms of these objects without any animation. Then answers can show how you can modify your code to have some animation. – Michal Charemza Commented Mar 2, 2015 at 9:22
• Ah: I might have misunderstood. I see the jQuery one doesn't show things that are currently in the basket, so you're after something simpler than I thought. Still, would be good to see your controller code with the ng-click function that calls the server. – Michal Charemza Commented Mar 2, 2015 at 9:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

here is the solution Codepen link

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

本文标签： javascriptAngular JS Flying Shopping Cart Animation DirectiveStack Overflow