角度指令jquery.dotdotdot，如何“动画化”截断？

Question

i'm using angular to make a directive out of the jquery.dotdotdot plugin. i've made it so that a "read more" or "read less" link is after the text to toggle truncation. because i have the directive restricted to attribute, this could be used on a number of items but in my case i'm using it on a span of multiline text. this toggling happens via a callback set in the dotdotdot options as seen below. to make it look smoother and provide more feedback, i'm trying to slow down or animate the transition between truncated and not. the actual truncation works.

callback: ->
    $(element).find(".read-more").click (e) ->
        e.preventDefault()
        $(element).trigger "destroy.dot"
        $(element).append '<a href="" class="read-less">...Read less</a>'

        $(element).find(".read-less").click (e) ->
            e.preventDefault()
            $(element).find(".read-less").remove()
            truncate()

i tried variations of using the .css method on the element and the element's parent (a td in a table), changing the 'transition' for height but that didn't work. is there a better overall approach? if not, what am i doing wrong with my current approach?

Answer 1

I ran into the same problem and thought I'd share my solution (regular javascript instead of coffescript):

// truncates truncatedTextSelector using dotdotdot; sets triggerSelector to an animated toggle of truncation; after toggle, 
// updates triggerTextSelector within triggerSelector to hiddenText or shownText when truncated or fully shown, respectively
function toggleTextTruncation(truncatedTextSelector, triggerSelector, triggerTextSelector, hiddenText, shownText) {
    // store truncated and auto heights before enabling dotdotdot
    this.trunc_height = $(truncatedTextSelector).css('height');
    this.auto_height = $(truncatedTextSelector).css({height:'auto'}).css('height');
    // initialize to truncated
    $(truncatedTextSelector).css({height: this.trunc_height}).dotdotdot();
    $(triggerSelector).data('shown', false);
    // on trigger, toggle shown or hidden
    var obj = this;
    $(triggerSelector).click(function(){
        if ($(this).data('shown')) {
            // animate truncated height and apply dotdotdot on complete
            $(truncatedTextSelector).animate({height: obj.trunc_height}, {complete: function(){ $(this).dotdotdot() }});
            $(this).find(triggerTextSelector).html(hiddenText);
            $(this).data('shown', false);
        } else {
            // destroy dotdotdot and animate auto height
            $(truncatedTextSelector).trigger('destroy').css({overflow:'hidden'}).animate({height: obj.auto_height});
            $(this).find(triggerTextSelector).html(shownText);
            $(this).data('shown', true);
        }
    })

    // destroys functionality; must be used whenever involved elements are hidden and re-shown, since this breaks it
    this.selfDestruct = function() {
        $(triggerSelector).unbind('click');
        $(truncatedTextSelector).css({height: this.trunc_height}).trigger('destroy');
    }
}