悬停时的角翻转卡

Question

我在角度应用程序中使用翻转卡。翻转卡工作正常点击如何我想在悬停时使用它。为此我在指令中使用鼠标悬停和鼠标输出功能，如此

appDirectives.directive("flip", function(){

  function setDim(element, width, height){
    element.style.width = width;
    element.style.height = height;
  }

  var cssString =
    "<style> \
    .flip {float: left; overflow: hidden} \
    .flipBasic { \
    position: absolute; \
    -webkit-backface-visibility: hidden; \
    backface-visibility: hidden; \
    transition: -webkit-transform .5s; \
    transition: transform .5s; \
    -webkit-transform: perspective( 800px ) rotateY( 0deg ); \
    transform: perspective( 800px ) rotateY( 0deg ); \
    } \
    .flipHideBack { \
    -webkit-transform:  perspective(800px) rotateY( 180deg ); \
    transform:  perspective(800px) rotateY( 180deg ); \
    } \
    .flipHideFront { \
    -webkit-transform:  perspective(800px) rotateY( -180deg ); \
    transform:  perspective(800px) rotateY( -180deg ); \
    } \
    </style> \
    ";

  document.head.insertAdjacentHTML("beforeend", cssString);


  return {
    restrict : "AE",
    controller: function($scope, $element, $attrs){

      var self = this;
      self.front = null,
      self.back = null;


      function showFront(){
        self.front.removeClass("flipHideFront");
        self.back.addClass("flipHideBack");
      }

      function showBack(){
        self.back.removeClass("flipHideBack");
        self.front.addClass("flipHideFront");
      }

      self.init = function(){
        self.front.addClass("flipBasic");
        self.back.addClass("flipBasic");

        showFront();
        self.front.on("mouseover", showBack);
        self.back.on("mouseout", showFront);
      }

    },

    link : function(scope,element,attrs, ctrl){

      var width = attrs.flipWidth || "100%",
        height =  attrs.flipHeight || "100%";

      element.addClass("flip");

      if(ctrl.front && ctrl.back){
        [element, ctrl.front, ctrl.back].forEach(function(el){
          setDim(el[0], width, height);
        });
        ctrl.init();
      }
      else {
        console.error("FLIP: 2 panels required.");
      }

    }
  }

});

appDirectives.directive("flipPanel", function(){
  return {
    restrict : "AE",
    require : "^flip",
    //transclusion : true,
    link: function(scope, element, attrs, flipCtr){
      if(!flipCtr.front) {flipCtr.front = element;}
      else if(!flipCtr.back) {flipCtr.back = element;}
      else {
        console.error("FLIP: Too many panels.");
      }
    }
  }
});

这是它的前端

<flip>
      <flip-panel style="background: #212121;">
     <a data-ui-sref="app.page({ page: 'scan', child: null })"><span>{{post.id}}</span></a>
     </flip-panel>
     <flip-panel style="background-color:#cf402d!important;
        background-image: url(./img/active-table.png)!important;
    background-repeat: no-repeat!important;
    background-position: center!important;">
        <a data-ui-sref="app.page({ page: 'scan', child: null })"></span></a>
      </flip-panel>
    </flip>

但是当我移动鼠标连续像移动鼠标从一端到另一端时，所有卡片翻转只有一个不能向后移动。您可以在此处查看http://1stfold.com/taskbox/dev/POS/angular/#/app/home/

有什么想法吗？