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