AngularJS animate element width inside directive -

i have directive changes width of div depending on elements fill div. works fine , looks this:

.directive('flexcolumn', ['$window', '$timeout', function ($window, $timeout) {      // resize container     var resize = function (element, width) {          // if our width > 992         if (width > 992) {              // resize our element             setheight(element);              // otherwise         } else {              // set our element width , height auto             element.css('height', 'auto');             element.css('width', 'auto');         }     };      // gets height minus off total     var getheight = function (element) {          // declare our variables         var height = 0,             children = element.children(),             loopchildren = element.hasclass('row');          // loop through element children         (var = 0; < children.length; i++) {              // child             var child = angular.element(children[i]);              // if child not column             if (!child.hasclass('flex-column')) {                  // if need loop children                 if (loopchildren) {                      // height of children                     height += getheight(child);                      // otherwise                 } else {                      // add height of child                      height += child[0].offsetheight;                 }             }         }          // return our height         return height;     };      // sets height of element     var setheight = function (element) {          // declare our variables         var row = element.parent().parent(),             height = 780,             hasparent = row.hasclass('row');          // if our row row         if (hasparent) {              // height of rest of items             height = height - getheight(row);         }          // set our elements height         element.css('height', height + 'px');          // after set height, set width         setwidth(element, hasparent);     }      // sets width of element     var setwidth = function (element, hasparent) {          // after short period         $timeout(function () {              // our last child             var children = element.children(),                 length = children.length,                 lastchild = children[length - 1];              // work out width of 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 width element             element.css('width', width + (hasparent ? 0 : 15) + 'px');         }, 500);     };      return {         restrict: 'c',         link: function (scope, element, attrs) {              // our window             var window = angular.element($window),                 width = $window.innerwidth;              // bind resize function             window.bind('resize', function () {                  // after half second                 $timeout(function () {                      // window width                     width = $window.innerwidth;                      // resize our element                     resize(element, width);                 }, 500);             });              // watch children             scope.$watch(function () {                  // watch changes in children                 return element.children().length;              // if our length changes             }, function (length) {                  // resize our element regardless of value                 resize(element, width);             });         }     }; }]) 

i animate width apply element. can't add class because width dynamic , changes based on it's content.

does know how can this? or if possible?

i believe can use like:

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

i using animate input box directive changes width when gets focused