我正在使用 angular 从 jquery.dotdotdot 插件中创建一个指令。我已经这样做了,以便“阅读更多”或“阅读更少”链接位于文本之后以切换 chop 。因为我的指令仅限于属性,所以它可以用于许多元素,但在我的例子中,我将它用于多行文本的跨度。这种切换是通过 dotdotdot 选项中设置的回调发生的,如下所示。为了让它看起来更流畅并提供更多反馈,我正在尝试放慢或动画 chop 和不 chop 之间的过渡。实际的 chop 工作。
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 方法的变体,更改高度的“过渡”,但这没有用。有更好的整体方法吗?如果不是,我目前的方法做错了什么?
最佳答案
我遇到了同样的问题并认为我会分享我的解决方案(常规 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');
}
}
关于javascript - angular指令jquery.dotdotdot,如何 chop 'animate'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21638637/