在ng-enter上为父元素设置动画

时间:2014-12-11 17:51:20

标签: javascript css angularjs ng-animate animate.css

我有一个下拉菜单,我想用Animate.css'弹跳'来设置下拉图标的动画。每当将新项目添加到下拉列表时进行分类。我安装了ngAnimate模块,并且设置了li的动画效果很好,我的问题是如何仅在存在ng-enter时添加此css类(即添加新列表项时),并且仅当ng-enter存在?

代码:

    <tab class='pull-right' class='ng-isolate-scope'>     
        <tab-heading>
        <div ng-controller="DropdownCtrl">
            <!-- Simple dropdown -->
            <span class="dropdown" dropdown on-toggle="toggled(open)">
              <a href class="dropdown-toggle {{ disableDropdown }} animated" dropdown-toggle ng-click='showMenu = ! showMenu'>
                <i class="fa fa-align-justify"></i>
              </a>
              <ul class="dropdown-menu port-dropdown-menu" ng-show='showMenu && disableDropdown != "disabled"' >
                <li class='dropdown-list-item' ng-repeat="choice in dropdown.items">
                    <a ui-sref="portfolio.manager.edit({portId: choice.id})">{{ choice.title }}</a>
                </li>
              </ul>
            </span>
        </div>
        </tab-heading>
    </tab>

编辑:它看起来像是一个自定义动画,它将弹跳类添加到下拉菜单图标,然后在几秒钟之后将其删除。但是,没有任何ng-animate功能正在处理这个部分,尽管它们正在处理其他部分。 console.log('add bounce')没有记录&#39;添加反弹&#39;总而言之,这让我觉得动画并不适用于局部。这是我的动画,当用于其他部分时,它可以正常工作:

&#39;使用严格的&#39;;

angular.module('portfolioManager.animations', []).animation('.dropdown-list-item', function($timeout) {
  return {
    enter : function(element, done) {
      $('.dropdown-toggle').addClass('bounce');
      console.log('add bounce')
      $timeout(function() {
        $('.dropdown-toggle').removeClass('bounce');
        done();
      },2000);
    }
  };
});

0 个答案:

没有答案
相关问题