AngularJs - 如何仅为某些东西的宽度制作动画？

Question

我没有找到任何关于如何使用新的动画支持动画Angular中某些内容的宽度的好例子。

我的应用程序侧面有一个抽屉，我想在用户按下按钮时展开/关闭。问题是，使用ng-show，它总是希望在“离开”动画完成后应用“display：none” - 我不希望这样。我只想动画抽屉的宽度。

实现这一目标的最佳方法是什么？

Answer 1

您可以编写自己的指令，使用jquery动画来修改元素的宽度：

angular.module('app', []).directive('testAnimate', function() {

  return {
    link: function(scope, iElement, iAttrs) {
      scope.$watch(iAttrs.testAnimate, function(newValue, oldValue) {
        var shown = !!newValue;

        if (shown !== !!oldValue) {
          iElement.animate({
            width: shown ? '+=50px' : '-=50px'
          });
        }
      });
    }
  };

});

现场演示：http://plnkr.co/edit/Il0fq0nlWKckpilWFXC6?p=preview