Question

我有这个PLUNKER - http://embed.plnkr.co/ti6X3rzoBwqmle4b06FI/preview

我正在尝试创建一个像jQuery Kwicks插件一样的扩展图像菜单 - http://devsmash.com/projects/kwicks/2.2.x/examples/responsive，但我试图以Angular的方式（没有jQuery依赖）。

我的结构包含一个带有重复li的ul：

<ul 
  class="accordion_wrap"  
  data-image-accordion-parent="{{mouseParentState}}" 
  data-child-count="{{imageAccordionItemsCount}}"

  data-ng-mouseenter="mouseEnterParent($event)"
  data-ng-mouseleave="mouseLeaveParent($event)"
>
  <li 
    data-ng-repeat="item in imageAccordionItems" 
    style="background-image: url('{{item.iaSrc}}');" 
    class="accordion_panel {{item.iaClass}}" 
    title="{{item.iaTitle}}" 

    data-parent-state="{{mouseParentState}}" 
    data-image-accordion-item="{{mouseItemState}}-{{mouseParentState}}" 
    index="{{item.iaIndex}}" 

    data-ng-mouseenter="mouseEnterItem($event)" 
    data-ng-mouseleave="mouseLeaveItem($event)"
  >  
  </li>

然后我的指示，我把它们分成了一个父母＆＃34;和＆＃34;孩子＆＃34 ;; imageAccordionParent和imageAccordionItem。

父指令代码（主要用于$ animate.addClass（element，＆＃39; item_equal＆＃39;）），当mouseleave事件在父级触发时，使所有项目的宽度相同：

  return {
     scope: true,
     link: function(scope, element, attrs) {
  },
  controller: function($scope) {
     $scope.mouseParentState = false;
     $scope.mouseLeaveParent = function(e) {
        $scope.mouseParentState = false;
     }
     $scope.mouseEnterParent = function(e) {
        $scope.mouseParentState = true;
     }
  }

子指令代码：

return {
  scope: true,
  restrict: "A",
  link: function(scope, element, attrs) {
    var first = false;
    if (!first) {
      $animate.addClass(element, 'item_equal');
      first = true;
    }

  attrs.$observe('imageAccordionItem', function(newVal) {

    element.removeClass('item_over');
    element.removeClass('item_out');
    element.removeClass('item_equal');

    if (scope.mouseParentState) {
      console.log("Parent Over");
      if (newVal == 'item-mouse-enter-true') {
        $animate.addClass(element, 'item_over');
        $animate.removeClass(element, 'item_out');
        $animate.removeClass(element, 'item_equal');
      }
      if (newVal == 'item-mouse-leave-true') {
        $animate.addClass(element, 'item_out');
        $animate.removeClass(element, 'item_over');
        $animate.removeClass(element, 'item_equal');
      }
    } else {
      console.log("Parent Leave");
      $animate.removeClass(element, 'item_over');
      $animate.removeClass(element, 'item_out');
      $animate.addClass(element, 'item_equal');
    }
  })
},
controller: function($scope, $element, $animate) {
  $scope.mouseItemState = 'item-mouse-leave';
  $scope.mouseEnterItem = function(e) {
    $scope.mouseItemState = 'item-mouse-enter';
    //console.log("over item");
  }
  $scope.mouseLeaveItem = function(e) {
    $scope.mouseItemState = 'item-mouse-leave';
    //console.log("leave item");
  }
}

基本上菜单有效（有点），但是当我快速将鼠标移到项目上时，我注意到了：

最后一张图片被切断并推到底部，我认为这是因为动画没有正确同步（如果甚至可以在Angular中使用）
ng-animate class并没有被删除部分或全部元素，我认为这种情况正在发生，因为许多动画试图立即触发并相互抵消。

另外，我正在使用：

TweenMax
UI路由器
FutureState resolve（ui-router-extras）
ngAnimate

这里又是PLUNKER - http://embed.plnkr.co/ti6X3rzoBwqmle4b06FI/preview

有关如何使这项工作更好的任何想法？

AngularJS - ngMouseenter＆amp; ngMouseleave扩展图像菜单

0 个答案: