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;
}

我正在使用它来设置一个输入框指令的动画，该指令在聚焦时改变宽度

AngularJS指令内部的animate元素宽度

1 个答案: