animation - AngularJs - 如何只为某物的宽度设置动画？

Question

我还没有找到任何很好的例子来说明如何使用新的动画支持在 Angular 中为某些东西的宽度设置动画。

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

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

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