角度指令jquery.dotdotdot，如何'動畫'截斷？

Question

我正在使用angular來製作jquery.dotdotdot插件的指令。我已經做了這樣的事情，以便在文本之後「切換更多」或「更少閱讀」鏈接切換截斷。因爲我將指令限制爲屬性，這可以用於多個項目，但在我的情況下，我在多行文本中使用它。這種切換通過在dotdotdot選項中設置的回調發生，如下所示。爲了使它看起來更流暢，並提供更多的反饋，我試圖減慢或動畫化截斷與非截斷之間的轉換。實際的截斷工作。

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() 

我試圖使用元素和元素的父（表格中的TD）上的CSS方法，改變用於高度「過渡」的變化，但沒有工作。有沒有更好的整體方法？如果不是，我現在的做法有什麼問題？

Answer 1

我遇到了同樣的問題，我想我會分享我的解決方案（常規的JavaScript，而不是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'); 
    } 
}