指令內的AngularJS動畫元素寬度

Question

我有一個指令可以根據填充該div的元素來改變div的寬度。這工作得很好，看起來像這樣：

.directive('flexColumn', ['$window', '$timeout', function ($window, $timeout) { 

    // Resize the container 
    var resize = function (element, width) { 

     // If our width > 992 
     if (width > 992) { 

      // Resize our element 
      setHeight(element); 

      // Otherwise 
     } else { 

      // Set our element width and height to auto 
      element.css('height', 'auto'); 
      element.css('width', 'auto'); 
     } 
    }; 

    // Gets the height to minus off the total 
    var getHeight = function (element) { 

     // Declare our variables 
     var height = 0, 
      children = element.children(), 
      loopChildren = element.hasClass('row'); 

     // Loop through the element children 
     for (var i = 0; i < children.length; i++) { 

      // Get the child 
      var child = angular.element(children[i]); 

      // If the child is not a column 
      if (!child.hasClass('flex-column')) { 

       // If we need to loop the children 
       if (loopChildren) { 

        // Get the height of the children 
        height += getHeight(child); 

        // Otherwise 
       } else { 

        // Add the height of the child to 
        height += child[0].offsetHeight; 
       } 
      } 
     } 

     // Return our height 
     return height; 
    }; 

    // Sets the height of the element 
    var setHeight = function (element) { 

     // Declare our variables 
     var row = element.parent().parent(), 
      height = 780, 
      hasParent = row.hasClass('row'); 

     // If our row is a row 
     if (hasParent) { 

      // Get the height of the rest of the items 
      height = height - getHeight(row); 
     } 

     // Set our elements height 
     element.css('height', height + 'px'); 

     // After we set the height, set the width 
     setWidth(element, hasParent); 
    } 

    // Sets the width of the element 
    var setWidth = function (element, hasParent) { 

     // After a short period 
     $timeout(function() { 

      // Get our last child 
      var children = element.children(), 
       length = children.length, 
       lastChild = children[length - 1]; 

      // Work out the width of the container 
      var position = element[0].getBoundingClientRect(), 
       childPosition = lastChild.getBoundingClientRect(), 
       width = childPosition.left - position.left + childPosition.width; 

      //console.log('--------------------------------'); 
      //console.log(lastChild); 
      //console.log(position); 
      //console.log(childPosition); 
      //console.log(width); 
      //console.log('--------------------------------'); 

      // Apply the width to the element 
      element.css('width', width + (hasParent ? 0 : 15) + 'px'); 
     }, 500); 
    }; 

    return { 
     restrict: 'C', 
     link: function (scope, element, attrs) { 

      // Get our window 
      var window = angular.element($window), 
       width = $window.innerWidth; 

      // Bind to the resize function 
      window.bind('resize', function() { 

       // After half a second 
       $timeout(function() { 

        // Get the window width 
        width = $window.innerWidth; 

        // Resize our element 
        resize(element, width); 
       }, 500); 
      }); 

      // Watch the children 
      scope.$watch(function() { 

       // Watch for changes in the children 
       return element.children().length; 

      // If our length changes 
      }, function (length) { 

       // Resize our element regardless of the value 
       resize(element, width); 
      }); 
     } 
    }; 
}]) 

我想動畫寬度我申請的元素。 我無法添加類，因爲寬度是動態的，並基於其內容進行更改。

有誰知道我該怎麼做？或者如果它甚至是可能的？

Answer 1

我相信你可以使用類似：

.flex-column { 
    transition: width .3s ease; 
} 

我使用這個動畫的輸入框指令時，它就會集中

改變寬度