Angular中高度的Javascript切换动画答案

【问题标题】：Javascript toggle animation of height in AngularAngular中高度的Javascript切换动画
【发布时间】：2016-03-04 20:22:57
【问题描述】：

我在我的 Angular 应用程序中定义了以下动画，用于切换元素的高度/不透明度。

它按预期工作，但是我现在用它来切换“主菜单”和“子菜单”。

当主菜单打开时，它从 0 增加到 X 高度，然后如果我打开子菜单，主菜单保持在 X 高度，而我希望它扩展到主菜单的高度 + 高度新打开的子菜单。

app.animation('.slide_toggle', ['$animateCss',
  function ($animateCss) {
    return {
      addClass: function (element, className, done) {
        if (className == 'ng-hide') {
          var animator = $animateCss(element, {
            to: { height: '0px', opacity: 0 }
          });
          if (animator) {
            return animator.start().done(function () {
              element[0].style.height = '';
              done();
            });
          }
        }
        done();
      },
      removeClass: function (element, className, done) {
        if (className == 'ng-hide') {
          var height = element[0].offsetHeight;
          var animator = $animateCss(element, {
            from: { height: '0px', opacity: 0 },
            to: { height: height + 'px', opacity: 1 }
          });
          if (animator) {
            return animator.start().done(done);
          }
        }
        done();
      }
    };
  }
]);

我愿意使用与上述不同的动画方法，只要动画可以顺畅地打开和关闭。

【问题讨论】：

标签： javascript angularjs css-animations ng-animate

【解决方案1】：

我能找到的所有“仅 Angular”滑动切换方法都存在问题（主要是由于未正确处理子元素高度）。最后，我在项目中包含了 jQuery，并从那里使用了全面的 slideUp 和 slideDown 功能，如下所示：

myApp.animation('.slide', function () {
   return {
      beforeAddClass: function (element, className, done) {
         if (className === 'ng-hide') {
            element.slideUp({ duration: 350 }, done);
         }
      },
      removeClass: function (element, className, done) {
         if (className === 'ng-hide') {
            element.hide().slideDown({ duration: 350 }, done);
         }
      }
   }
});

【讨论】：