Javascript 角度指令jquery.dotdot，如何'；制作动画'；截断？

我使用angular从jquery.dotdot插件中生成一个指令。我这样做是为了在文本后面有一个“多读”或“少读”链接来切换截断。因为我的指令限制为属性，这可以用于许多项，但在我的例子中，我在多行文本的范围内使用它。此切换通过点选项中的回调集进行，如下所示。为了使它看起来更平滑并提供更多的反馈，我尝试减慢或设置截断和非截断之间的转换动画。实际的截断是有效的

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

回调：->
$（元素）。查找（“.read more”）。单击（e）->
e、 预防默认值（）
$（元素）。触发“destroy.dot”
$（元素）。附加“”
$（元素）。查找（“.read less”）。单击（e）->
e、 预防默认值（）
$（元素）。查找（“.read less”）.remove（）
截断（）

---

我尝试在元素和元素的父元素（表中的td）上使用.css方法，更改高度的“过渡”，但没有成功。是否有更好的总体方法？如果没有，我当前的方法有什么错？

我遇到了同样的问题，并认为我应该分享我的解决方案（常规javascript而不是coffescript）：

---

设置动画将很困难，主要是因为截断是通过逐字更改文本来完成的。您将不得不通过克隆div来进行截断，将其放在原始div后面，截断克隆，然后淡出原始div。对于我来说，没有什么太多的问题需要我在回答中演示。您首先无条件地设置了显示的

数据

属性，请参见

$（truncatedTextSelector）.css（{height:this.trunc_height}）.dotdot（）$（triggerSelector）。数据（'显示'，错误）。在执行此操作之前，您应该实际检查文本是否被截断
dotdotdot
为此提供了一个回调函数，其中包含一个名为
isTruncated
的参数。查看更多
// 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');
    }
}