簡體   English   中英

Angular JS飛行購物車動畫指令

[英]Angular JS Flying Shopping Cart Animation Directive

目前我正在嘗試創建一個動畫“飛行購物車”的角度指令。

我已經找到了大量的jQuery解決方案,但沒有在純粹的Angular Directive中完成。 我想在這里實現的jQuery飛行器演示......

原始jQuery飛行器Codepen:

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

我對Angular Directives並不熟悉如何完成這項工作。 我已經開始使用自己的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>'
  };
});

這是Codepen鏈接的解決方案

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM